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/

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

1 个答案: