Question

如何在始终位于底部的代码中添加页脚？除了左侧div中的滚动之外，仍然无法滚动。页脚应该填满页面的整个宽度。

CSS

.Top {
    display: flex;
    position: relative;
    z-index: 10;
    height: 80px;
}

.Container {
    display: flex;
    overflow: hidden;
    height: 100vh;
    margin-top: -100px;
    padding-top: 100px;
    position: relative;
    width: 100%;
    backface-visibility: hidden;
    will-change: overflow;
}

.Left,
.Right {
    overflow: auto;
    height: auto; 
}

.Left {
    width: 65%;
    overflow: auto;
    line-height: 18px;
    padding: 0 15px 90px 15px;
}

.Right {
    width: 35%;
}

HTML

<div class="Top"></div>

<div class="Container">
<div class="Left"></div>
<div class="right"></div>
</div>

Answer 1

尝试使用 Bootstrap 代替编写自己的CSS类。这会让你的生活更轻松。以下示例将为您提供解决方案。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
    </div>
</div>

Answer 2

以下是使用display: table

的两种方法

附注：display: table版本适用于IE 11，Edge，Chrome，Firefox，Safari。由于render issue in IE10及以下，您需要在页脚和页眉上使用固定高度，并使用calc（）设置内部单元格/ div上的高度以使其滚动。

html, body{
  height: 100%;
  margin: 0;
}
.tbl{
  display:table;
  table-layout: fixed;
  border-collapse: collapse;
}
.row{
  display:table-row;
}
.row.expanded{
  height: 100%;
}
.cell{
  display:table-cell;
}
.container,
.content{
  width: 100%;
  height: 100%;
}
.header {
  background: #0099cc none repeat scroll 0 0;
  height: 75px;
}
.footer {
  background: #3a3a3a;
  height: 75px;
}

#left_col {
  background: orange none repeat scroll 0 0;
  width: 50%;
  height: 100%;
}
  .scrollwrap {
    position: relative;
    height: 100%;
  }
    .scroll {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      overflow: auto;
    }
#right_col {
  background: green none repeat scroll 0 0;
  width: 50%;
}

<div class="tbl container">
  <div class="row">
    <div class="cell header">
    </div>
  </div>
  <div class="row expanded">
    <div class="cell">
      <div class="tbl content">
        <div class="row">
          <div id="left_col" class="cell">
            <div class="scrollwrap">
              <div class="scroll">
                long content <br>long content <br>long content <br>long content <br>
                long content <br>long content <br>long content <br>long content <br>
                long content <br>long content <br>long content <br>long content <br>
                long content last
              </div>
            </div>
          </div>
          <div id="right_col" class="cell"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="cell footer">
    </div>
  </div>
</div>

和推荐的，使用flexbox，但在较旧的浏览器上支持较少的浏览器

html, body{
  margin: 0;
}
.flex{
  display:flex;
}
.flex.column {
  flex-direction: column
}
.flexitem{
}
.container{
  height: 100vh;
}
.header {
  background: #0099cc none repeat scroll 0 0;
  height: 75px;
}
.content{
  flex: 1;
}
.footer {
  background: #3a3a3a;
  height: 75px;
}
#left_col {
  background: orange none repeat scroll 0 0;
  width: 50%;
  overflow: auto;
}
#right_col {
  background: green none repeat scroll 0 0;
  width: 50%;
}

<div class="flex column container">
  <div class="header">
  </div>
  <div class="flex content">
    <div id="left_col">
      long content <br>long content <br>long content <br>long content <br>
      long content <br>long content <br>long content <br>long content <br>
      long content <br>long content <br>long content <br>long content <br>
      long content last
    </div>
    <div id="right_col"></div>
  </div>
  <div class="footer">
  </div>
</div>

添加页脚到页面没有滚动

2 个答案: