Question

如何根据体内div的内容长度来调整页脚的高度？

我已经尝试过寻找一个解决方案，比如将页脚的位置“固定”，但这不是我想要的，因为它就像卡在屏幕的底部。我希望页脚显示在我到达页面底部并在main_content高度更改时自动更改其高度，因为我已将main_content的高度设置为auto。我怎么能这样做？

以下是它的样子：http://jsfiddle.net/cherry12345/t62b2qb6/

继承我的代码：

HTML

<body>
    <div  id="main_content">
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
    </div>
    <div id="footer">
        &copy; 2014-2015 example.com. All Rights Reserved.
    </div>
</body>

CSS

#main_content {
    width: auto;
    height:auto;
    position:absolute;
    top:110px;
    left:400px;
    background: #FFF;
    border:1px solid lightgray;
}   
#footer{
    position:absolute;
    bottom:0px;
    width:100%;
    background: #666;
    padding: 24px;
    font-size: 12px;
    color: #CCC;
    text-align: center;
}

Answer 1

我认为这会有所帮助：

#main_content {
    width:auto;
    background: #FFF;
    border:1px solid lightgray;
}   

#footer{
    width:100%;
    background: #666;
    padding: 24px;
    font-size: 12px;
    color: #CCC;
    text-align: center;
}

Fiddle

Answer 2

你可以重新安排和放弃定位，让它像这样工作：

#main_content {
    background: #FFF;
    border:1px solid lightgray;
}
#main_content > p {
    margin-left: 440px;
}
#main_content > p:first-child {
    margin-top: 110px;
}
#footer {
    background: #666;
    padding: 24px;
    font-size: 12px;
    color: #CCC;
    text-align: center;
}

<div id="main_content">
    <p>Some text</p>
    ...
    <p>Some text</p>
    <div id="footer">&copy; 2014-2015 mysite.com. All Rights Reserved.</div>
</div>

http://jsfiddle.net/t62b2qb6/3/

Answer 3

将html定义如下：

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>

和CSS（注意页脚应该是绝对的，包装器是相对的）

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:#5ee;
}
#content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}

http://jsfiddle.net/3n52zt2h/

如何自动调整页脚的高度

3 个答案: