CODEWITHSUNDEEP
htmlcssiframe
user2701811
user2701811

Reputation:

css max-height not working in div

i created a script in css that should give a max-height for a div identified as 'embed-container' but it doesn't work. any help?
CSS:

.embed-container iframe {
max-height: 360px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.embed-container {
max-height: 360px;
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
overflow: hidden;
}

HTML:

<div class="embed-container">
<iframe src="slideshow/slideshow.html" frameborder="0" scrolling="no"></iframe>
</div>

Upvotes: 0

Views: 4384

Answers (2)

Ramy
Ramy

Reputation: 43

Padding-bottom is the problem. You can set the height to the viewport width instead, max-height should work then

height: 56.25vw; /* 16:9 */

Upvotes: 0

cari
cari

Reputation: 2300

You give your div a padding-bottom of 56.25%. This means 56.25% of the WIDTH of the parent element. Since your parent element gets as big as the screen is wide, your padding-bottom grows with the screen width.

Consider giving your iframe a fixed width/height and make the padding absolute in px, and remove the absolute/relative positioning.

Upvotes: 1

Related Questions