Menu
I have two DIVs inside a container div, where I need to set them both to fit to the browser window like below, but it doesn't fit in my code, please suggest me a solution
My Style Sheet code
html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .container { height: auto; width: 100%; } .div1 { float: left; height: 100%; width: 25%; } .div2 { float: left; height: 100%; width: 75%; } Body
<body> <div class="container"> <div class="div1"></div> <div class="div2"></div> </div> 
812
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow.
You could also use viewport percentages if you don't care about old school IE.
height: 100vh;
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
