2

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

一定有：

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

想拥有：

  • 不使用表格
  • 不使用 JavaScript

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

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;
}

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);

预先感谢您的帮助！

4

1 回答 1

3

如果手动设置标题的高度不是问题，您可以在滚动区域上使用绝对定位并将顶部设置为标题的高度。我很害怕你不会更接近纯 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/

于 2013-03-05T23:27:46.663 回答