2

If I have a div with height:100% & width:100%, it's background color will be up to the browser's height and width primarily. But if the content inside that div grows dynamically, then, the div will not expand according to the content, text will be overlapped and flows over that div. On the other hand, if I set min-height and min-width to 100%, then if the content length is smaller than browser's window, background-color will not stretched to browser's height and width.

html, body{
 height: 100%;
 margin: 0;
 padding: 0;
}
#container{
 height: 100%;
 width: 100%;
 background-color: red;
}

How to make such div which background-color will cover up browser's window size primarily but if the content grows dynamically, it will be able to expand with content at the same time.

Regards.

stockBoi
  • 287
  • 2
  • 9
  • 26
  • Do in the case that the content 'grows dynamically' past the bounds of the window? Because if you have height and width 100% it will fill the whole thing – Zach Saucier Jul 29 '13 at 15:54
  • Sorry but could not understand what you have said. – stockBoi Jul 29 '13 at 15:58
  • 1
    Why don't you set the background color on the `body` element? In that case the whole browser window always has the background color set, regardless of the actual size of the `div`. – Mecki Jul 29 '13 at 15:59
  • because it is my layout of the webpage, in which main content area will be different than body color. – stockBoi Jul 29 '13 at 16:00
  • But you said that the `div` should fill the whole browser window, so how would you ever see the background color of the `body` tag? You said yourself: *"if I set min-height and min-width to 100%, then if the content length is smaller than browser's window, background-color will not stretched to browser's height and width."* so to me that sounds you want that the `div` stretches to fill everything - but if it fills everything, than you cannot see anything of the body background color. – Mecki Jul 29 '13 at 16:02
  • Because I have a 60px height div (which acts as a header) before main content area. – stockBoi Jul 29 '13 at 16:08
  • In your question, you keep saying multiple times, that your `div` shall be 100% of the browser height. 100% means 100% to me and not 100% minus 60 pixels. I still don't have the slightest idea what your page shall look like or what problem you really try to solve here. Maybe it would have been helpful if you had included some HTML code that shows multiple `div`s, how they are arranged within each other or towards each other and which `div` is not acting the way you would like it to act. – Mecki Jul 29 '13 at 16:17

2 Answers2

0

I can't understand your question very clearly, I think you should set a correct overflow property to your div,

try giving it overflow: auto; or any other suitable one

The CSS Overflow Property

Milindu Sanoj Kumarage
  • 2,714
  • 2
  • 31
  • 54
  • Fiddle with width and height 100% without any content:http://jsfiddle.net/stockboi/VNKYm/ and with content larger than browser height: http://jsfiddle.net/stockboi/JQ7fr/ – stockBoi Jul 29 '13 at 16:22
0

I still don't know what you are actually trying to achieve. Going by your fiddle sample, it would have been much easier to just use a solid border around the inner diver to get a red surrounding (instead of another div with background color and padding). But if you just don't want that the text oveflows the div, you have to allow the div to resize:

http://jsfiddle.net/JQ7fr/1/


Update

I think see your problem now. What you are trying to do is not possible the way you are trying to do it. You are falling for a fundamental misconception of the CSS Box Model. The min-height of a box always refers to the height of its parent. If the height of the parent is not set, the height is auto by default, which means the height is calculated by the browser to be as big as necessary for the content of the box to fit. It is also calculated that way if you set a min-height!

Assume you give body a height of 100%, the body is as high as your browser window. If give your outer div a min-height of 100%, it will also be as high as your browser window, but since you set no height (setting min-height does NOT affect the height property!), the height of this box is auto. So in fact, the real height (CSS standard calls this the "tentative height") is only as big as the content of your outer div (not necessarily 100%), yet since min-height says it must be 100% it will render with a height of 100%, regardless what its real height is. If you now set min-height of your inner div to 100%, those 100% mean "100% of the height of my parent box height" and the parent box height is auto, it is NOT 100%! That's why the inner div does not fill the whole screen then.

Of course you can give your outer div a height of 100%, in that case setting the min-height of your inner div to 100% will make it fill the whole screen, but now the outer div is really just 100% in height, it will not expand beyond 100% (it has a FIXED HEIGHT), not even if the inner div is bigger than that, that's why red color will not expand beyond the screen height, even if the yellow color goes beyond the screen height.

Either your outer div has a fixed height, in which case the height will be fixed (that's the whole point of a fixed height, isn't it?) or it has a flexible height, but if it has a flexible height, it will never be "higher" than required for its content (the inner div) and thus using 100% at the inner div, whether you set min-height or height doesn't matter, always refers to 100% of the outer div height and that one will be as big as required for the inner div. I hope you were able to understand what I'm saying here.

You can surely get outer div to behave the way you want (always fill at least 100% of the screen, but expand beyond that if the content requires it) by just setting it's min-height to 100%, since here min-height will refer to the body height and your body has a fixed height, but the inner div will never behave that way. Well, it can behave that way, if your outer div has a fixed width, but then the outer div will not expand, not even if the inner div would require it, instead the inner div will overflow beyond the bounds of the outer one.

I'm pretty sure it is no problem to some create a web page that will look exactly the way you want it to look, but the problem is, we (or I) don't know what it is supposed to look. I doubt you want an ugly yellow page with a red and blue border around it, do you? Yet so far this is the only page we have seen from you. I don't know what kind of color effect you are trying to achieve, whether you are using images (or if you should be using images) or how the page will really look like in the end.

Community
  • 1
  • 1
Mecki
  • 125,244
  • 33
  • 244
  • 253
  • Thankyou very much. Your solution works as I wanted. I don't want to use solid border because I have to create several borders outside inner div (like outer1, outer2, outmost div outside innerdiv) each with different color. But If I want to use border instead separate div, I can use only one color border (in css2). – stockBoi Jul 29 '13 at 16:56
  • Mecki, Please look at your fiddle: (http://jsfiddle.net/JQ7fr/1/) once again. There the outer div (background-color: red) was not expanded to bottom of inner div (background-color: yellow) as you specified it's height as 100%. If you change height to min-height, then outer div will be expanded together with inner div. But then if you remove all content (text) from inner div, then height of inner div will be zero (may be due to max-height: auto). How to overcome this problem, i.e without content in innerdiv & min-width of outerdiv, how to keep height of inner div to 100% of outer div? – stockBoi Jul 30 '13 at 12:01
  • @stockBoi The problem is that I still don't have the slightest idea what it is supposed to look like. I wish you could just post a picture like "Here, that's how it shall look, regardless how much text there is in the inner DIV". – Mecki Jul 30 '13 at 12:34
  • Mecki here in this fiddle you can see what it supposed to look like: http://jsfiddle.net/stockboi/VNKYm/ – stockBoi Jul 30 '13 at 14:49
  • Dear Mecki, plz see the last Answer (I was unable to reply here as the comment had more characters than maximum characters allowed for reply comment). – stockBoi Jul 31 '13 at 04:22