Menu
for my web application, i would like the main div to be full screen (both width and height = 100%), and regardless of content, i want it to stay at that size. that means, if there are not much content, it shouldn't shrink, and if there are too much content, it shouldn't push this main div.
how can i do this?
(i'm ok with hacks applied to this div, as long as it will keep contents hack-free)
983
if you set width:500px; and height:300px; (or whatever size you want) the div should stay the same size. Also, you can set overflow:hidden; so that if whatever is in the div goes beyond those bounds, it is not shown, and does not resize the div. Show activity on this post. Try this one.
position:absolute You can also use position absolute as well as set all the viewport sides (top, right, bottom, left) to 0px will make the div take the full screen.
You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
One way you can achieve this is setting display: inline-block; on the div . It is by default a block element, which will always fill the width it can fill (unless specifying width of course).
Or even just:
<div id="full-size"> Your contents go here </div> html,body{ margin:0; padding:0; height:100%; width:100%; } #full-size{ height:100%; width:100%; overflow:hidden; /* or overflow:auto; if you want scrollbars */ } (html, body can be set to like.. 95%-99% or some such to account for slight inconsistencies in margins, etc.)
59
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
