主要部分：占据屏幕的其余部分

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

浮动：底部的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调整自身以获取足够的屏幕高度以防止滚动条显示。

Answer 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;
}

Answer 2

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

<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>

使中心div取剩余屏幕，底部div占用尽可能多的空间

主要部分：占据屏幕的其余部分

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

2 个答案: