html - 如何在固定尺寸外部 div 中包含的内部 div 上获得垂直滚动条？

Question

我正在寻找一种 HTML/CSS 解决方案，其中内部 DIV 具有以下特征:

必须具备:

• 包含在可变高度同级标题 div 下方的固定高度容器 div 中。
• 填充可用的可变高度，没有 max-height CSS 属性
• 如有必要，可垂直滚动以容纳内容
• 位于 DOCTYPE = HTML 4.01 严格(如有必要，最好是 HTML 5)的文档内
• 兼容多浏览器(Chrome、Firefox、IE、Safari、手机浏览器)

想要:

• 不使用表格
• 不使用 JavaScript

到目前为止，我有以下部分解决方案:

• 仅限 WebKit，包含表格:http://jsfiddle.net/ksevksev/PBXZG/2/

---

HTML

<div class="parent">
    <table cellspacing="0">
        <tr><td class="header">Heading</td></tr>
        <tr><td class="scrollContainer"><div class="innerScroll">
            Lots of text goes here. Lots of text goes here. Lots of text goes here.
            ...
            Lots of text goes here. Lots of text goes here. Lots of text goes here.
            </div>
        </td></tr>
    </table>
</div>

CSS

.parent
{
    margin:0px;
    padding:0px;
    height: 400px;
    background-color: orange;
    border: thick purple solid;
}

table
{
    border:green thick solid;
    width:100%;
    height:100%;
    margin:0px;
}

.header
{
    font-weight: bold;
    font-size: 28pt;
    font-family: sans-serif,Arial;
    border:yellow thick solid;
}

.scrollContainer
{
    margin: 0px;
    position: relative;
    border: thick blue solid;
    bottom:0px;
    top:0px;
    left:0px;
    right: 0px;
    height:100%;
}

.innerScroll
{
    overflow-y: auto;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

---

• 使用 jQuery 的多浏览器:http://jsfiddle.net/ksevksev/yDJrV/1/

---

HTML

<div class="parent">
    <div class="header">Heading</div>
    <div class="scrollContainer">
        <div class="innerScroll">
            Lots of text goes here. Lots of text goes here. Lots of text goes here.
            ...
            Lots of text goes here. Lots of text goes here. Lots of text goes here.
        </div>
    </div>
</div>

CSS

.parent
{
    margin:0px;
    padding:0px;
    height: 400px;
    background-color: orange;
    border: thick purple solid;
}
.header
{
    font-weight: bold;
    font-size: 28pt;
    font-family: sans-serif,Arial;
    border:yellow thick solid;
}

.scrollContainer
{
    position: relative;
    border: thick blue solid;
    bottom:0px;
    top:0px;
    left:0px;
    right: 0px;
    height:100%;
}

.innerScroll
{
    position: absolute;
    overflow-y: auto;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

JS

var container = $(".scrollContainer");
var header = $(".header");
var parent = $(".parent");
var containerHeight = parent.innerHeight() - header.outerHeight();
//alert("containerHeight=[" + containerHeight + "]");
container.outerHeight(containerHeight);

---

预先感谢您的帮助!

Answer 1

如果手动设置标题高度不是问题，您可以在滚动区域上使用绝对定位并将顶部设置为标题高度。我担心你不会更接近纯 css。

http://jsfiddle.net/Neograph734/yDJrV/2/

.parent
{
    margin:0px;
    padding:0px;
    height: 400px;
    background-color: orange;
    border: thick purple solid;
    position: relative;
}
.header
{
    font-weight: bold;
    font-size: 28pt;
    font-family: sans-serif,Arial;
    border:yellow thick solid;
}

.scrollContainer
{
    position: absolute;
    border: thick blue solid;
    bottom:0px;
    top:55px; /* This is the header height */
    left:0px;
    right: 0px;

}

.innerScroll
{
    position: absolute;
    overflow-y: auto;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 100%;
}

更新

如果 javascript 不是问题，你可以使用这一小段 jquery

var headerHeight = $('.header').outerHeight();
$('.scrollContainer').css('top', headerHeight);

此处的工作示例:http://jsfiddle.net/Neograph734/yDJrV/3/