Div doesnt fill parent

Question

Trival case is working

HTML

<div class="container">
    <div class="element">
        Content
    </div>
</div>

CSS

body, html{
    height:100%;
}
.container{
    background: green;
    height: 100%;
}
.element{
    background: gray;
    height:100%;
    width:100px;
}

http://jsfiddle.net/5zjkcqkL/

Gray element has same height as his green parent

Here is my "minimal working sample"

HTML

<div id="wrapper">
    <div id="header">
        Header
    </div>

    <div id="content">        
        <div class="text-background">
            Some content text   
        </div>
    </div>

    <div id="footer">        
        Footer            
    </div>    
</div>

CSS

html, body {
    font-family: Arial, Helvetica, sans-serif;
    background: black;
    color: #FFF;
    padding: 0;
    margin: 0;
    height: 100%;
}

#wrapper {
    min-height: 100%;
    position: relative;
}

#content {
    min-height: 100%;
    padding-bottom: 172px; /* Height of the footer element */
    background: green;
}

#footer {
    border-top: 2px #999 solid;
    background-color: #FFF;
    padding: 15px 0;
    width: 100%;
    height: 140px;
    position: absolute;
    bottom: 0;
    left: 0;
    color:black;
}

#header{
    border-bottom: 1px solid white;
}

.text-background {
    background: gray;    
    height: 100%;
    min-height: 100%;   
    width:100px;
}

http://jsfiddle.net/mrxfbszz/

Why gray div doesnt fill its green parent by height?

Change the `min-height` for content and wrapper to `height`. — j08691, Jan 30 '15 at 15:49
Add `height: 100%;` to your `#wrapper` and your `#content`. Also add it to your `body`. That seemed to work from my end. — somethinghere, Jan 30 '15 at 15:50
possible duplicate of [child inside parent with min-height 100% not inheriting height](http://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height) — Ruddy, Jan 30 '15 at 15:52

score 0 · Accepted Answer · answered Jan 30 '15 at 16:32

0

Change your padding-bottom: 172px; to height: 172px;

#content {
    height: 172px;
    background: green;
}

See JSFiddle

answered Jan 30 '15 at 16:32

mikelt21

2,728
4
23
33

score 0 · Answer 2 · answered Jan 30 '15 at 16:35

0

Change the height on your wrapper and #content to 100%

answered Jan 30 '15 at 16:35

james walsh

19
1
4

Div doesnt fill parent

2 Answers2