Question

我很想弄清楚如何让.footer和div .content拥有height:100%。我知道如何让.footer坚持到底部但我的div . content没有到达底页。我知道我可以在div content上增加最小高度，但它无法解决问题。

这是my site

这是我想要做的，但是很难让中心页面和页脚进入页面底部。

链接here

CODE

<body>
    <div class="header">
    </div>  
    <div class="content">
        <div class="page-content">
            <div class="column_4"></div>
            <div class="column_5"></div>
            <div class="column_6"></div>
            <div class="column_7"></div>
        </div>  
    </div>
    <div class="footer">
    </div>      
    <div style="display:none">
    </div>
</body>

body {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    margin:0;
    font-size: 15px;
    font-weight: 400;
    line-height: 157%;
    color: #666666;
    padding:0;
}
.content {
    min-height: 0;
.header {
    min-height:300px;
    background-color:#000000;
}
.footer {
    min-height:300px;
    background-color:#000000;
}
    background-color:#9E959E;
}

我的建议后我目前拥有的内容：

html,body {
    height:100%;
}
body {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    margin:0;
    font-size: 15px;
    font-weight: 400;
    line-height: 157%;
    color: #666666;
    padding:0;

}
.content {
    min-height: 0;
    background-color: #9E959E;
    height: calc(100% - 50px); /* add this */ 
}

.footer {
    min-height: 25px;
    margin-left: auto;
    margin-right: auto;
    background-color:#000000;
    clear: both;
    position:fixed;
    right:0px;
    left:0px;
    bottom:0px;
}

.header {
    min-height:300px;
    background-color:#000000;
}
@media only screen and (min-width : 768px) {
    .header {
        min-height: 25px;
    }
}
@media only screen and (min-width : 992px) {
    .header {
        min-height: 25px;
    }
}



<body>
    <div class="header">
    </div>  
    <div class="content">
        <div class="page-content">
            <div class="column_4"></div>
            <div class="column_5"></div>
            <div class="column_6"></div>
            <div class="column_7"></div>
        </div>  
    </div>
    <div class="footer">
    </div>      
    <div style="display:none">
    </div>
</body>

Answer 1

写

.footer {
min-height: 25px;
margin-left: auto;
margin-right: auto;
background-color:#000000;
clear: both;
}

而不是

.footer {
min-height: 25px;
margin-left: auto;
margin-right: auto;
background-color:#000000;
clear: both;
position:fixed;
right:0px;
left:0px;
bottom:0px;
}

这会将内容放在内容旁边 link here

如何将Div高度设置为100％

1 个答案: