1

我对如何在网站中定位 div 有点陌生，所以我希望有人能在这里提供帮助。我想要的是一个三明治类型的设置，在两个 div 中间有一个滚动内容。这样我就有了一个页眉 div 和一个页脚 div，它们都必须在页面上保持静态。然后，在它们之间，我必须有一个内容 div 填充两个固定 div 之间的空间，并且能够自行滚动。我将如何构建像这样简单的东西？或者这根本不简单？

更新：我创建了一个我认为几乎是我想要的小提琴。我的页眉和页脚在页面上保持静态。但是，我不得不欺骗主 div 的上边距，以便它的内容在标题之后立即开始。实际上，我仍然存在的唯一问题是内容的结尾在底部被页脚截断。我需要查看全部内容。

小提琴：http: //jsfiddle.net/fgskS/18/

谢谢！

4

2 回答 2

3

只需将连续元素的高度设置为等于 100% 并将内容 DIV 设置为在 Y 轴上滚动：

<header>
    <h1>Sandwich Layout</h1>
</header>
<div id="main" role="main">

</div>
<footer>
    Footer stuff here
</footer>

html,
body { height: 100%; margin: 0; padding: 0; } /* This is important */

header,
footer { background: #ccc; height:20%; }

#main { height: 60%; overflow-y:scroll; }

小提琴：http: //jsfiddle.net/kboucher/3E8Gg/

2020 年更新：

HTML：

<header>
    <h1>Sandwich Layout</h1>
</header>
<div class="main" role="main">
  <div class="fake-height">Content here</div>
</div>
<footer>
    Footer stuff here
</footer>

CSS：

body,
html {
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  background: #eee;
  padding: 1rem;
}

.main {
  flex: 1 0 auto;
  height: 0; // prevents flex box expanding out of view-height
  overflow-y: auto;
  padding: 1rem;

  .fake-height {
    height: 1000px;
  }
}

https://codepen.io/kboucher/pen/dyomxWN

于 2012-10-08T21:26:07.010 回答
1

如果您将页眉和页脚 div 设置为固定，您可以为您的内容创建一个主 div，该 div 将按照您想要的方式滚动。

于 2012-10-08T21:09:22.967 回答