javascript - 粘性页眉和页脚可滚动的主区域

我希望我的页面有一个固定的 header 和 footer，它们必须始终显示在屏幕上。侧面板在 aside 上，主要内容在 section 内。

使用 JavaScript，我设法让 aside 占据所有剩余的高度(window.height - header.height - footer.height)。但它只有在 section 不太高的情况下才有效。当我调整窗口大小时，我可以看到 footer 正在窗口底部边缘下方消失，为 section 留出空间。

我尝试了许多不同的 overflow-y 组合(在 section 内，在 div 内，在两者上)，但无济于事。我该如何解决？

我做了一个jsfiddle example .

function resize() {
  var hPage = window.innerHeight;
  var hHead = document.getElementById('header').offsetHeight;
  var hFoot = document.getElementById('footer').offsetHeight;
  document.getElementById('spn').innerHTML = 'Page: ' + hPage + '<BR>Head: ' + hHead + '<BR>Foot: ' + hFoot;
  document.getElementById('aside').style.height = (hPage - hHead - hFoot) + 'px';
}

html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}
header {
  background-color: green;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 30px;
}
section {
  float: right;
  width: 80%;
  overflow-x: auto;
  overflow-y: auto;
}
section div {
  padding: 10px;
  overflow-x: auto;
  overflow-y: auto;
}
aside {
  float: left;
  background-color: lightgreen;
  width: 20%;
}
aside p {
  margin-left: 20px;
}
footer {
  background-color: green;
  color: white;
  text-align: center;
  clear: both;
}
table {
  border-collapse: collapse;
}
th {
  border: 1px solid black;
  text-align: center;
  font-weight: bold;
}
td {
  border: 1px solid black;
  text-align: center;
}

<body onload='resize()' onresize='resize()'>
  <header id='header'>Test 0.1</header>
  <aside id='aside'>
    <p>Menu 1</p>
    <p>Menu 2</p>
    <p>Menu 3</p>
    <p>Menu 4</p>
    <p><span id='spn'>n</span>
    </p>
  </aside>
  <section>
    <div id='divMain'>
      <table>
        <tr>
          <th>Col1</th>
          <th>Col2</th>
          <th>Col3</th>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
      </table>
    </div>
  </section>
  <footer id='footer'>Address,
    <br>phone,
    <br>etc.
    <br>
    <br>Address,
    <br>phone,
    <br>etc.</footer>
</body>

最佳答案

试试 flexbox 方法，不需要 javascript。添加了一个 <main>元素包装 <aside>和 <section> .

jsFiddle

html,
body {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
  flex-direction: column;
}
header {
  background-color: green;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 30px;
}
main {
  flex: 1;
  display: flex;
  min-height: 0;
}
aside {
  background-color: lightgreen;
  width: 20%;
  overflow: auto;
}
aside p {
  margin-left: 20px;
}
section {
  width: 80%;
  overflow: auto;
}
section div {
  padding: 10px;
}
footer {
  background-color: green;
  color: white;
  text-align: center;
}
table {
  border-collapse: collapse;
}
th {
  border: 1px solid black;
  text-align: center;
  font-weight: bold;
}
td {
  border: 1px solid black;
  text-align: center;
}

<header id='header'>
  Test 0.1
</header>
<main>
  <aside id='aside'>
    <p>Menu 1</p>
    <p>Menu 2</p>
    <p>Menu 3</p>
    <p>Menu 4</p>
    <p><span id='spn'>n</span>
    </p>
  </aside>
  <section>
    <div id='divMain'>
      <table>
        <tr>
          <th>Col1</th>
          <th>Col2</th>
          <th>Col3</th>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
      </table>
    </div>
  </section>
</main>
<footer id='footer'>
  Address,
  <br>phone,
  <br>etc.
  <br>
  <br>Address,
  <br>phone,
  <br>etc.
  <br>
</footer>

关于javascript - 粘性页眉和页脚可滚动的主区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41733610/

javascript - 粘性页眉和页脚可滚动的主区域

上一篇：javascript - 将 img src 替换为 js jquery

下一篇：css - 使用 Google Chrome 时图像不会显示在媒体打印品中