Question

我想要一个长页面，固定的顶部100px div和一个固定的50px底部div。但是，我希望在向下滚动页面时滚动底部div。

很难解释，但最好的例子是PayPal.com

的首页

在第一页加载时，底部div看起来像是固定的，当您调整浏览器窗口的高度时，该div保持在底部。然而，当您向下滚动页面时，它不是固定的。

任何人都可以解释他们是如何做到的吗？我试图重新创建类似的东西，但无法看到他们如何管理它。

据我所知他们有这个HTML ...

<div id="fixed-top">
  <header class="table-row">
    // header content
  </header>
  <div class="table-row table-row-two">
    // Video content
  </div>
  <div class="table-row">
    //bottom content
  </div>
</div>

这个CSS ...

#fixed-top {
    height: 100%;
    width: 100%;
    display: table;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.table-row {
        display: table-row;
}

但仅此一项并不能实现。我也看不到任何js获得窗口高度并将其应用于主固定div。

帮助！：）

编辑：

刚刚找到了一种方法来使用javascript，使用窗口高度控制中间行的高度，减去标题和第三行的150px。

jQuery(document).ready(function(){
    $('div.table-row-two').css({'height':(($(window).height())-150)+'px'});

    $(window).resize(function(){
    $('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
    });
});

但是说，Zwords CSS only方法似乎是赢家。

Answer 1

据我了解，您正在寻找像粘性页脚这样的东西。所以基本上如果内容不够，页脚应该像固定的那样坐在底部，但如果内容进来，它应该像其他内容一样向下滚动。

试试这个 - http://css-tricks.com/snippets/css/sticky-footer/

Answer 2

Check this fiddle / Fullscreen

使用display:table;，display:table-row;，min-height调整为屏幕

<强> HTML

<div class="wrapper">
    <div class="row">menu</div>
    <div class="row">content</div>
    <div class="row">footer</div>
</div>
<div class="wrapper">
    <div class="row">content1</div>
    <div class="row">content2</div>
    <div class="row">content3</div>
</div>

<强> CSS

html,body,.wrapper{
    width:100%;
    height:100%;
    margin:0px auto;
    padding:0px;
}
.wrapper{
    display:table;
    border:1px solid black;
}
.wrapper .row{
    display:table-row;
    background-color:rgb(220,220,220);
}
.wrapper .row:nth-of-type(1){
    min-height:15px;
}
.wrapper .row:nth-of-type(2){
    height:100%;
    background-color:white;
}
.wrapper .row:nth-of-type(3){
    min-height:15px
}

Answer 3

首先，您需要设置正文和html标记的高度，否则表格不会占据全屏。然后我改变了你的代码，使它更容易。

HTML：

<div id="fixed-top">
    <header>
        // header content
    </header>
    <div>
        // Video content
    </div>
    <div>
        //bottom content
    </div>
</div>

CSS：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
}
#fixed-top {
    display: table;
    width: 100%;
    height: 100%;
}
#fixed-top > * { /* makes all the direct children of #fixed-top a table row*/
    display: table-row;
    background: lightblue;
}
#fixed-top > *:nth-child(1) {
    background: lightgreen;
    height: 40px;
}
#fixed-top > *:nth-child(3) {
    background: lightgreen;
    height: 25%;
}

您可以将高度设置为固定高度（以px为单位）或百分比。如果你只给出三行中的两行高度，第三行将自动填满剩余空间。

另外，请检查此demo。

Answer 4

您可以使用$(window).height()使用jQuery轻松完成此操作并减去页脚/标题的高度。有关示例，请参阅Fiddle。

让Div固定底部和底部滚动

4 个答案:

Check this fiddle / Fullscreen