如何防止正文滚动但允许滚动内容并将页脚留在底部？

Question

页面的结构是页眉、两列（一固定）和页脚。 我需要这个功能： 标题停留在屏幕顶部且不可滚动。 左列是固定宽度，高度是屏幕的 100%。它包括两行。顶行是固定宽度，填充所有高度和可滚动，底部是固定宽度和高度。 右栏是可滚动的。 页脚位于右列并可与右列一起滚动，但如果右列很短，则留在屏幕底部。 问题是滚动到页面正文。只有带页脚的右栏应该是可滚动的。当右栏没有内容时，页脚不会停留在屏幕底部。

body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
}

.header,
.footer {
  width: 100%;
  height: 50px;
  background: #ccc;
  text-align: center;
}

.content {
  height: 100%;
  background: lightgray;
}

#leftcontent {
  width: 300px;
  float: left;
  height: 100%;
  background: blue;
}

#lefttop {
  width: 300px;
  overflow-y: auto;
  position: fixed;
  top: 60px;
  bottom: 100px;
  background: aqua;
}

#leftbottom {
  width: 300px;
  height: 100px;
  position: fixed;
  bottom: 5px;
  background: pink;
}

#rightcol {
  overflow-y: auto;
  height: 100%;
  background: green;
}

#rightcontent {
  background: magenta;
}

<div class="header"> header content </div>
<div class="content">
  <div id="leftcontent">
    <div id="lefttop">left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br
      />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br /> left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br
      />left looonnnnng<br />
    </div>
    <div id="leftbottom">
      left bottom content<br />left bottom content<br />left bottom content<br />
    </div>
  </div>
  <div id="rightcol">
    <div id="rightcontent">
      right cccooonntent<br />right cccooonntent<br />right cccooonntent<br /> right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right
      cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br
      />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right
      cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />
    </div>
    <div class="footer"> footer content </div>
  </div>
</div>

我不能使用 Bootstrapper，因为使用 Telerik 并且更喜欢使用 CSS。

Answer 1

建议你调查一下CSS Position property。

要将标题固定在顶部，您可以说

.header
{
  position: fixed;
}

但是，这将使您的标题 div 独立于页面的其余部分放置。因此，为防止重叠，您应该这样做：

.content{
  margin-top: 50px; /*The hight of the header div*/
}

然后，为了将页脚保持在底部，您可以相应地分配正确内容的高度，而不管其内容如何，​​然后使其可像这样滚动：

#rightcontent
{
  height: calc(100% - 50px);
  overflow-y: scroll;
}

我会将页眉和页脚的规则分开。 总体而言，您的 CSS 更改部分应如下所示。

.header
{
  width: 100%;
  height: 50px;
  background: #ccc;
  text-align: center;
  position: fixed;
  top: 0;
}

.content{
  margin-top: 50px;
}

.footer{
  height: 50px;
  background: #ccc;
  text-align: center;
}

#rightcontent
{
  height: calc(100% - 50px);
  overflow-y: scroll;
}

Answer 2

这是可行的解决方案。 http://jsfiddle.net/isadykov/s37z0pfu/40/ 如果您增加右侧内容较短的窗口高度，则页脚将停留在屏幕底部。如果您减小右侧内容不合适的窗口高度，则页脚将被推到页面底部并出现滚动条。

body, html, form { padding:0; margin:0; height:100%;  }
.header, .footer{ width:100%;  background:#ccc; text-align:center;  }
.header {height: 50px;}
.content{ height: calc(100% - 50px); background:lightgray;}
#leftcontent{ width:300px; float:left; height:100%;  background:blue;}
#lefttop {width:300px; overflow-y:auto; position: fixed; top:50px;bottom:100px;background:aqua;}
#leftbottom {width:300px; height:100px; position: fixed; bottom:5px;  background: pink;}
#rightcol{ overflow-y:auto; height: 100%;  background:green;}
#rightcontent { min-height:100%; margin: 0 auto -50px;background:magenta; }
.footer {height: 50px;}
.push {height: 50px; }

<div class="header"> header content </div>
<div class="content">
  <div id="leftcontent">    
    <div id="lefttop">left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />
       left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />left looonnnnng<br />
    </div>
    <div id="leftbottom">
       left bottom content<br />left bottom content<br />left bottom content<br />
    </div>     
  </div>
  <div id="rightcol">
    <div id="rightcontent">    
        right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />
        right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br />right cccooonntent<br /> cccooonntent<br />right cccooonntent<br />right cccooonntent<br />    
       <div class="push" ></div>
    </div>
    <div class="footer"> footer content </div>
  </div>
</div>