Back to Blog
Iframe height auto6/20/2023 ![]() If you can’t assign a fixed height for your heading, then another solution is to set the display property of the container to flex, then assign a flex-grow property of 1 to your iframe’s wrapper: You may also want to add a height: 100% property above the height: 100vh - 50px property as a fallback for legacy browsers that don’t support the calc() function from CSS3 and/or height declared in vh. One way to solve this is to wrap the heading and iframe in elements, then give the heading wrapper a fixed height and use the calc() function in CSS to give the iframe wrapper a height of 100vh minus the height of the heading: How to Solve ThisĪlthough there are probably other ways to solve this, the two best ways I could think of involved the calc() function when the height property of the heading is fixed, and flexbox when it isn’t. ![]() Since both the and tags have been assigned the height of the window, 100% of that height also equates to that height. In the case of our example, the parent of the is the element, whose parent, in turn, is. When you give the iframe a CSS height property of 100%, its height becomes 100% of that of its parent element. So how do you solve this? The Answer Is CSS Inheritance But if you give it a CSS height property of 100%, the iframe takes up the entire height of the window-and a scroll bar appears. When it comes to height, you want the iframe to take up whatever window height is left after the heading. ![]() You have an heading at the top of the page and a YouTube live stream embedded in an just below it. Let’s say you’re creating a landing page for a webinar.
0 Comments
Read More
Leave a Reply. |