CSS: dynamically div-height
Question
I have a CSS side with header, footer and a center content-part.
I'd like to use the full height of the browsers window.
eg
header - height: 20vh
content - height: 60vh
footer - height: 20vh
That's 100vh and the full window.
Is it possible to make this breakup dynamically with CSS without manually manipulating the style with javascript regarding the applications status (is footer on or off)??
Lets say content should have 80vh if footer is disabled and 60vh if it is on.
3 answers
solution1
2 2017-12-28 11:09:11
Why not using flexbox or grid for this?
Set the min-height for your header and footer (with vh as unit) and then add a height of 100% to your content.
The flexbox then uses all available space for the content, but still renders the minimum height of ther other elements.
function changeVisibility() { document.querySelector( 'footer' ).classList.toggle( 'hidden' ); }
*, *::before, *::after { margin: 0; box-sizing: border-box; } .container { width: 100vw; height: 100vh; display: flex; flex-direction: column; } header { /* set default height */ flex-basis: 10vh; background: lightyellow; } .content { /* use all available space */ flex-grow: 1; background: pink; } footer { /* set default height */ flex-basis: 20vh; background: lightblue; } .hidden { display: none; }
<div class="container"> <header>header <button onclick="changeVisibility()">toggle footer</button></header> <div class="content">content</div> <footer>footer</footer> </div>
solution2
2 2017-12-28 11:10:07
I Think this code will be help you dynamically height by css
(add more content only one box and see 3 boxes height increase )
#main { width: 220px; height:auto; border: 1px solid black; display: -webkit-flex; /* Safari */ display: flex; } #main div { -webkit-flex: 1; /* Safari 6.1+ */ -ms-flex: 1; /* IE 10 */ flex: 1; }
<!DOCTYPE html> <html> <head> </head> <body> <div id="main"> <div style="background-color:coral;">RED</div> <div style="background-color:lightblue;">BLUE</div> <div style="background-color:lightgreen;">Green div with more content. Green div with more content.</div> </div> <p><b>Note:</b> Internet Explorer 9 and earlier versions do not support the flex property.</p> <p><b>Note:</b> Internet Explorer 10 supports an alternative, the -ms-flex property. IE11 and newer versions fully support the flex property (do not need the -ms- prefix).</p> <p><b>Note:</b> Safari 6.1 (and newer) supports an alternative, the -webkit-flex property.</p> </body> </html>
solution3
2 ACCPTED 2017-12-28 11:12:02
You can do it with the Flexbox where you set the #content to take the remaining vertical space with flex: 1 :
function display() { document.getElementById('footer').classList.toggle('display'); }
html, body {width:100%;height:100vh;margin:0} body { /* or any other parent element / flex-container */ display: flex; /* displays children inline by default thats why you need to change its direction from row (default) to column */ flex-direction: column; /* stacks children vertically */ } header, footer { height: 20vh; } #content { flex: 1; /* takes the remaining vertical space no matter if the footer is present or not or even if its the only child element inside the flex-container */ background: Aquamarine; } .display {display:none}
<header>HEADER</header> <div id="content">CONTENT <a href="#" onclick="display()">Toggle height</a></div> <footer id="footer">FOOTER</footer>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.