Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

我不能使用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/ 如果增加右侧内容较短的窗口高度，则页脚将保留在屏幕底部。如果您降低右侧内容不适合的窗口高度，则会将页脚推到页面底部并显示滚动条。

＆＃13;

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

＆＃13;

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

＆＃13;

如何防止正文滚动但允许滚动内容并保持底部的页脚？

2 个答案: