如何在包含在固定尺寸的外部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/