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

Question

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

必须有：

• 包括可变高度同级标题下方的固定高度div容器内DIV。
• 填充可用的可变高度没有最大高度CSS属性
• 垂直滚动如果必要的话，以适应含量
• 是文档内具有DOCTYPE = HTML 4.01严格（优选地，HTML 5如有必要）
• 是多-browser兼容（浏览器，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/