佈局具有4個格 - 2固定，1個動態（不滾動），並在滾動條1個填充高度

我要實現HTML和CSS以下行爲在單一網頁 Webpage 佈局具有4個格 - 2固定，1個動態（不滾動），並在滾動條1個填充高度

我拿到前三工作區域（黑色，紅色，藍色），但我對可滾動內容（綠色）有問題。它適用於靜態高度，但我不知道如何動態填充頁面的其餘部分。

這裏是我得到

<div class="body"> 
<div class="menu"> 
    menu 
</div>   
<div> 
    <div class="dynamiccontent"> 
     <div class="errorheader"> 
      Errors 
     </div> 
     <div class="errorcontent"> 
      errors 
     </div> 
     <div class="fixedtext"> 
      some text 
     </div>    
     <div class="fillcontent"> 
      fillcontent 
     </div> 
    </div> 
</div>

.body 
{ 
    background:red; 
    margin:0 auto; 
    width:100%; 
    top:0px; 
} 

.menu 
{ 
    background:black; 
    color: white; 
    height: 100px; 
} 

.dynamiccontent 
{ 
    position:fixed; 
    top:50px; 
    margin:0px auto; 
    width:100%;  
    background: red; 
} 

.errorheader 
{ 
    color: white;  
    text-align: center;  
    font-size: 1.4em; 
} 

.errorcontent 
{  
    color: white; 
    text-align: center; 
} 

.fixedtext 
{ 
    background: blue; 
    color: white; 
    position: relative; 
} 

.fillcontent 
{ 
    background: green; 
    position: relative; 
    overflow: auto; 
    z-index: 1; 
    height: 400px; 
}

一個不錯的也將是對右側使用「瀏覽器的滾動條」的（不綠色內容框中只有一個簡短的本地滾動條）。

謝謝你的幫助！

來源

2013-11-04 phil

你想要的頁面的其餘部分與堅持的前三名整疊滾動屏幕？ –

頂部的三個應始終可見，只有綠色框應滾動。 – phil

@phil [will this suit]（http://jsfiddle.net/vucko/LgxJx/1）？ – Vucko

使用overflow:hidden到html,body,.main和overflow:scroll到.main-content，你可以模擬你需要什麼。

HTML：

<div class="main"> 
    <div class="header">header</div> 
    <div class="dynamic-content"> 
     <div class="dynamic-content-text"> 
      dynamic-content-text<br/>... 
     </div> 
     <div class="dynamic-content-fixed">dynamic-content-fixed</div> 
    </div> 
    <div class="main-content"> 
     main-content<br />... 
    </div> 
</div>

CSS：

html,body, .main{ 
    margin:0; 
    padding:0; 
    height:100%; 
    overflow: hidden; 
} 

.header{ 
    position: fixed; 
    left:0; 
    right:0; 
    height:50px; 
    background: red; 
} 

.dynamic-content{ 
    padding-top:50px; 
} 

.dynamic-content-text{ 
    background:yellow; 
} 

.dynamic-content-fixed{ 
    background:blue; 
} 

.main-content{ 
    background:green; 
    height:100%; 
    overflow: scroll; 
}

JSFiddle

來源

2013-11-04 07:06:45 Vucko

你可以用jQuery/javascript實現這一點。

首先檢查頁面是否有滾動條，如果不需要調整。如果不是，則需要拉伸最後一個容器以填充窗口空間的其餘部分。

將容器高度一起添加並從窗口高度中減去，然後將其設置爲最後一個容器的高度。

只要有喜歡的方法（未測試）

$(document).ready(function(){ 
    if(!hasScrollbar()) { 
     var filled = $(".errorheader").outerHeight() + ... ; 
     $(".fillcontent").height($(window).height()-filled); 
    } 
});

有查找，如果窗口有一個滾動條，檢查這裏計算器大量的代碼。如果您希望用戶調整窗口大小，可以爲$（window）.resize（）添加一個回調函數。

另一種可能的解決方案是使用body元素來僞造最後一個容器擴展。如果容器由背景標識，則可以使用與最後一個容器相同的背景。請記住設置身體填充100％。

來源

2013-11-04 06:45:42

佈局具有4個格 - 2固定，1個動態（不滾動），並在滾動條1個填充高度

回答

相關問題