0

这与这个问题有些相关，但我试图在 div 垂直对齐时实现这一点。

或多或少，这就是我想要实现的目标：

Main Div：占据屏幕的其余部分

页脚 div：根据需要占用尽可能多的空间

float:bottom 的 css 不可用，所以我想听听一些替代方案。

这是我目前所拥有的：

<div id="main_div" style="height:100%;overflow:scroll">
...Contents
</div>

<div id="footer_div" style="height:50px">
...Contents
</div>

页脚显示在 main_div 下方，用户必须向下滚动才能看到它，而不是 main_div 调整自身以获取足够的屏幕高度以防止滚动条出现。

4

2 回答 2

1

你可以检查这个小提琴 http://jsfiddle.net/sarfarazdesigner/3fLca/

让我知道我的理解是对还是错？因为我所做的就是我对你的问题的理解。

#main_div{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:50px;
    overflow:auto;
    background:#eee;
}
#footer_div{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background:#ddd;
    height:50px;
}
于 2013-02-20T05:56:55.977 回答
0

您可以将页脚设置在页面底部的固定位置。任何重叠的内容都会在其后面滚动。

<html>
    <head>
    </head>
    <body>
        <div class="wrapper" style="width: 100%; border:1px solid blue;"> 
            <p>Your website content here.</p>
            <p>Your website content here.</p>
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer" style="width: 100%; position:fixed; left:0; bottom: 0; border:1px solid red;">
            <p>FOOTER CONTENT HERE</p>
        </div>
    </body>
</html>
于 2013-02-20T05:12:18.360 回答