I am trying to make a responsive iframe, it kind of works for width by setting width=100%, but doing so for height causes this: https://i.stack.imgur.com/G3NlO.jpg
Iframe is placed inside <div class="w3-half w3-center">, I am using w3 css.
Asked
Active
Viewed 760 times
0
vvAve
- 177
- 1
- 3
- 13
-
1What do you want to achieve? – Aug 15 '17 at 21:21
-
As I said, make it responsive. It should change size to fit page. – vvAve Aug 15 '17 at 21:25
-
Possible duplicate of [Full-screen iframe with a height of 100%](https://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100) – Matthew Barbara Aug 15 '17 at 21:32
-
Your question was asked and answered before: https://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100 – Matthew Barbara Aug 15 '17 at 21:32
-
Solutions there aren't helping, plus I don't need to make it page size, I only want to fit it in specific section. – vvAve Aug 15 '17 at 21:40
1 Answers
0
I assume that you want to maintain some sort of aspect ratio in your iframe.
Percentages only work in heights if there is a definite height set of the parent element.
The viewport-height (vh) and viewport-width (vw) work very well for making responsive elements because they don't need any container heights to be set, but they can look very different depending on the display.
Something like this will give you a responsive 4:3 aspect ratio:
div.wrapper {
width:40vw;
height:30vw;
}
Adjust the values to suit your needs.
Josh
- 3,872
- 1
- 12
- 13
-
That works, thanks. One more thing, is there a way to calculate height from specific element (footer) instead of bottom of the page? – vvAve Aug 15 '17 at 21:53
-
I'm not sure that I understand the question here. Are you asking if there's a way to set the height of your iframe to the same height as the footer? – Josh Aug 16 '17 at 13:34