Question

Trival案例正在运作

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/

灰色元素与其绿色父元素具有相同的高度

这是我的＆＃34;最小工作样本＆＃34;

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/

为什么灰色div不会按高度填充其绿色父母？

Answer 1

将您的padding-bottom: 172px;更改为height: 172px;

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

参见 JSFiddle

Answer 2

将包装器的高度和#content更改为100％

Div不填充父母

2 个答案: