内容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剩余高度

回答

相关问题