html - 使用滚动条使 html div 适合屏幕

Question

我正在创建一个网站，其中的基本设计由几个相互叠加的 block 组成，如下所示:

前三个div是固定高度和宽度的，主要区域也是固定宽度的，整个东西在屏幕上水平居中。无论屏幕大小和比例如何，我都希望主区域延伸到屏幕底部，并且如果内容超出屏幕底部，则在其中使用滚动条。

我发现的问题是，要使用滚动条，您似乎需要一个绝对高度，所以我无法找到任何适合它并能够同时滚动浏览内容的方法。

有什么想法吗？

Answer 1

这是执行此操作的一种方法。我知道可能有太多 div 只是为了页面的外观，使其不是 100% 语义化的。无论如何，给你:

http://jsfiddle.net/vSt3Z/

<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="content">
    <div class="inner">
        <div class="scroller">
            Content
        </div>
    </div>
</div>

还有 CSS:

.one, .two, .three {
    height: 40px;
    margin: 0;
    padding: 0;
}

.content {
    background: yellowgreen;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    padding-top: 120px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;

}

.content .inner {
     height: 100%;
    overflow-y: scroll;
}

.content .inner .scroller {
    height: 1200px;
}

请忽略这个:

* {
    margin: 0;
    padding: 0;
}

它只是为了从 jsfiddle 中删除烦人的默认填充