內容div剩餘高度

-1

我試圖得到與頁眉，頁腳和兩列的佈局。網站的寬度必須與屏幕分辨率和高度有關。右列應該有250px的寬度。如果內容很大，左列（內容）應該有一個垂直滾動條。內容div剩餘高度

換句話說，頁眉，頁腳和右側應始終可見並固定。如果需要，內容應該有垂直滾動條。

感謝

編輯：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 1</title> 

<style type="text/css"> 
    body { 
    font: 11px Tahoma, Arial; 
    margin: 0; 
    padding: 0; 
    color: #3d5770; 
    background-color: #A7A7A7; 
} 
    #wrapper 
{ 
    min-width: 987px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 98%; 
} 
    #header 
{ 
background-color: orange; 
    clear: both; 
    float: left; 
    width: 100%; 
    height:100px; 
    background-color: orange;  
} 
    #main 
{  
    width: 100%; 
    background-color: White; 
} 

#footer 
{ 
    position: absolute; 
    bottom: 0px; 
    height: 30px; 
    clear:both; 
    background-color: aqua; 
    margin-left: auto; 
    margin-right: auto; 
    width: 98%; 
}  

#content 
{ 
    position: absolute; 
    top: 100px; 
    bottom: 30px; 
    overflow: auto; 
    margin-right: 262px; 
    background-color: White; 
} 

#right 
{  
    width: 245px;  
    float: right; 
} 

#rightInner 
{ 
    position: absolute; 
    top: 100px; 
    bottom: 30px; 
    width: 244px; 
    background-color: Lime; 
} 


</style> 
</head> 

<body> 

<div id="wrapper">   
    <div id="header">header</div> 

    <div id="main"> 
     <div id="right"> 
      <div id="rightInner">Banners</div> 
     </div> 

     <div id="content">Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content </div> 
    </div> 

    <div id="footer">footer</div>   
</div>  

</body> 
</html>

正如你所看到的，內容是DIV增長horizontaly和高度是屏幕的最大高度。這部作品在我的22" 畫面精美，但是當我改變屏幕尺寸，我得到一點點分裂在我的內容和正確的格之間的屏幕...

來源

2011-12-01 Ralph Jansen

你有任何我們可以看的代碼嗎？有很多地方都有這方面的例子 - 一個可能的鏈接：http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/ –

你的問題是什麼？你試過了什麼？ – Polynomial

我認爲http://rentacoder.com更適合這個。 – deviousdodo

我終於找到了解決辦法！我只是增加了樣品左邊欄可以刪除它，如果你想

注意：這並不在IE7工作！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
    <title>Untitled 1</title> 
    <style type="text/css"> 
     body 
     { 
      font: 11px Tahoma, Arial; 
      margin: 0; 
      padding: 0; 
      color: #3d5770; 
      background-color: #A7A7A7; 
     } 
     #header, #footer, #main 
     { 
      position: absolute; 
      min-width: 987px; 
      width: 98%; 
      margin-left: 1%;       
     } 
     #content, #right, #left 
     { 
      height: 100%; 
      overflow-y: auto; 
     } 
     #header 
     { 
      height: 100px; 
      top: 0; 
      background-color: orange; 
     } 
     #main 
     { 
      top: 100px; 
      bottom: 30px; 
      background-color: White; 
     }   
     #footer 
     { 
      height: 30px; 
      bottom: 0px;    
      background-color: #9933FF; 
     }  
     #innerContent  
     { 
      padding: 10px; 
     } 
     #left 
     { 
      float: left; 
      width: 245px;    
      margin-right: 3px; /* Space between content and left div */ 
      background-color: Lime; 
     } 
     #right 
     { 
      float: right; 
      width: 245px;    
      margin-left: 3px; /* Space between content and right div */ 
      background-color: Lime; 
     } 
    </style> 
</head> 
<body> 
    <div id="header">header</div> 
    <div id="main"> 
     <div id="left">Banners Banners Banners Banners Banners 54321</div> 
     <div id="right">Banners Banners Banners Banners Banners 54321</div> 
     <div id="content"> 
      <div id="innerContent"> 
       Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content 
       Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content 
       Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content 
       Dynamic content 1 
       Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content 
       Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content 
       Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content 
       Dynamic content 2 
       Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content 
       Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content 
       Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content 
       Dynamic content 3     
      </div> 
     </div> 
    </div> 
    <div id="footer">footer</div> 
</body> 
</html>

來源

2011-12-02 10:29:01

試試這個Fiddle

做了一些不同的方式，

html, body { background: #ccc; } 
.wrap { 
    background: none repeat scroll 0 0 #FFFFFF; 
    margin: 20px; 
    overflow: hidden; 
    padding: 20px; 
    min-width:998px; 
} 

.main { 
    margin: 0 220px 0 0; 
} 

.main, .sidebar { 
    background: none repeat scroll 0 0 #EEEEEE; 
    min-height: 100px; 
} 

.sidebar { 
    float: right; 
    height: 200px; 
    width: 200px; 
    background: #eee; 
    min-height: 100px; 
}

來源

2011-12-02 08:29:28

@LockTar雖然這正是你的結構，但你可以自己做這件事。 –

嗨Sameera，並排獲取兩個div並不是什麼大不了的事情。問題在於，我無法將它與具有頁面剩餘高度的內容div結合使用。 –

內容div剩餘高度

回答

相關問題