Menu
+--------------------+ | | | | | | | | | 1 | | | | | | | | | +--------------------+ | | | | | | | | | 2 | | | | | | | | | +--------------------+ Contents of (1) as shown above are unknown, as it may increase or decrease in dynamically generated pages. The second div (2) as shown above, should fill the remaining space.
here is an example of my html
<div id="full"> <!--contents of 1 --> <div id="someid"> <!--contents of 2 --> </div> </div> css...
#full{width: 300px; background-color: red;} #someid{height: 100%;} Or is this method wrong? How should I do this? please see my demo and show me my mistake.
384
You could consider min-height: 100vh; . This sets the height equal or greater to the size of the screen, vh: vertical height .
You should be able to do this if you add in a div (#header below) to wrap your contents of 1.
If you float #header, the content from #someid will be forced to flow around it.
Next, you set #header's width to 100%. This will make it expand to fill the width of the containing div, #full. This will effectively push all of #someid's content below #header since there is no room to flow around the sides anymore.
Finally, set #someid's height to 100%, this will make it the same height as #full.
JSFiddle
HTML
<div id="full"> <div id="header">Contents of 1</div> <div id="someid">Contents of 2</div> </div> CSS
html, body, #full, #someid { height: 100%; } #header { float: left; width: 100%; } Update
I think it's worth mentioning that flexbox is well supported across modern browsers today. The CSS could be altered have #full become a flex container, and #someid should set it's flex grow to a value greater than 0.
html, body, #full { height: 100%; } #full { display: flex; flex-direction: column; } #someid { flex-grow: 1; } To get a div to 100% height on a page, you will need to set each object on the hierarchy above the div to 100% as well. for instance:
html { height:100%; } body { height:100%; } #full { height: 100%; } #someid { height: 100%; } Although I cannot fully understand your question, I'm assuming this is what you mean.
This is the example I am working from:
<html style="height:100%"> <body style="height:100%"> <div style="height:100%; width: 300px;"> <div style="height:100%; background:blue;"> </div> </div> </body> </html> Style is just a replacement for the CSS which I haven't externalised.
24
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
