Height of a container w.r.t children

Question

We are using CSS3 and HTML5. I am trying to write a page where there will be a div to show some gradient, then comes the header and the header is followed by a container.

This is what I wrote and is working fine until I introduced some dummy lines. Click here to see the sample and this is the code snippet

CSS,

html {
    height: 100%;
}
body {
    margin: 0px;
    height: 100%;
}
.container {
    height: 100%;
}
.oss-gradient {
    height: 5px;
    min-width: 1024px;
    background: yellow;
}
.header {
    height: 40px;
    min-width: 1024px;
    background: #def;
}
.content-wrapper {
    width: 1024px;
    height: calc(100% - 45px);
    background: #defabc;
    margin: 0px auto;
}

My html,

<div class="container">
    <div class="oss-gradient">
    </div>
    <div class="header">
    </div>
    <div class="content-wrapper">
        <!-- some dummy lines here //-->
    </div>
</div>

Then I changed the content-wrapper's height property to min-height. And then it worked fine. It worked fine when when I try to change the zooming levels and my browser window's size. Then I opened firebug and hovered on contianer div, body and html elements. I noticed that content-wrapper element came out of the container div. In other words container, body and html did not expand with the content-wrapper element.

Then I added min-height property for container div thinking that it would expand wrt content-wrapper. Then I zoomed out of the page and found that the content-wrapper is not expanding the available height.

Then I removed height property on html, body and min-height property on the container. Now all three elements expand wrt the child. But when I remove all dummy lines I cant see the content-wrapper div.

How can I fix this?

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

You need to use min-height for your body element and use background on your html element

Demo (Covering entire page)

Demo 2 (With more content)

body {
    margin: 0px;
    min-height: 100%;
}

You can refer my question here for similar issue.

edited May 23 '17 at 11:56

Community

1
1

answered Dec 19 '13 at 06:23

Mr. Alien

153,751
34
298
278

@mr-alien This is not solving my problem. Firstly my site is designed for 1024X768 pixels. What if I want a background for my content-wrapper div? I changed the background and zoomed out of the web page. Again I see some issue. – Krishna Chaitanya Dec 19 '13 at 06:58
@KrishnaChaitanya Did you saw my demo? if you want to keep the background on content div only than go for a js solution if you are so redundant to move the background – Mr. Alien Dec 19 '13 at 07:02
@mr-alien: Yeah I saw your demo and even read the link you have mentioned. I understood that there is no easy way to achieve this. I will use height on html and min-height on body. This makes body to expand the entire viewport when zoomed in and out. But my container is not occupying the viewport height or body's height. Its looking ugly when I add a background on container and zoomout. For zoomin its working fine – Krishna Chaitanya Dec 19 '13 at 07:07
@KrishnaChaitanya well, I also linked to my question where the above solution is suggested, so I tweaked your CSS a bit, if you want, you can post another question for JS or jQuery solution :) – Mr. Alien Dec 19 '13 at 07:14
@mr-alien I dont want to use js or jquery. Again I have to add a window listener and change the height always when the zomming level changes or the browser is resized. – Krishna Chaitanya Dec 19 '13 at 07:29
@KrishnaChaitanya yea, so you can follow my solution :) – Mr. Alien Dec 19 '13 at 07:29

Height of a container w.r.t children

1 Answers1