两列分区布局：左=流体，右=固定和可滚动

这个布局相当简单和容易实现，这里已经涵盖了很多，我的问题来自于我想要正确的div可滚动时。两列分区布局：左=流体，右=固定和可滚动

我根本无法让左侧流体和静态定位，同时允许右侧的固定宽度为和可滚动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <style type="text/css" style="display: none !important;"> 
    body { 
     margin: 0 0 0 0; 
     overflow: hidden; 
    } 

    #page-wrap { 
     background: white; 
     max-width: 100%; 
    } 

    #main-content { 
     background-color: #797979; 
     padding-right: 350px; 
     padding-top: 20px; 
     height: 100%; 
     float: left; 
     position: absolute; 
    } 

    #right-sidebar { 
     background-color: #cacaca; 
     width: 350px; 
     float: right; 
     overflow: auto; 
     height:100%; 
    } 
    </style> 
</head> 
    <body> 
     <div class="page-wrap">   
      <div id="main-content">     
        <h2>Content Area</h2> 
      </div> 
      <div id="right-sidebar"> 
       Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/> 
      Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/> 
      Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/> 
      Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/> 

      </div>    
      <div style="clear: both;"></div> 
     </div> 
    </body> 
</html>

来源

2013-05-04 Alex

您是否尝试过你的HTML，车身宽度和高度设置为100％ – 2013-05-04 15:56:55

试试这个 - jsFiddle

body { 
    margin: 0 0 0 0; 
    background-color: #797979; 
    /*overflow: hidden;*/ 
} 
#page-wrap { 
    background: white; 
    max-width: 100%; 
} 
#main-content { 
    position:absolute; 
    right:200px; 
    left:0px; 
    padding:20px; 
} 
#right-sidebar { 
    background-color: #cacaca; 
    position:fixed; 
    overflow-y:scroll; 
    right:0px; 
    width:200px; 
    height:100%; 
}

来源

2013-05-04 16:25:10 apaul

美丽，太感谢你了！看起来像位置：固定是让我绊倒的东西之一 – Alex 2013-05-04 18:50:52

在你的小提琴中，＃page-wrap应该是.page-wrap，但它对页面没有任何影响，所以真的可以安全除去。 – nocarrier 2014-10-19 23:16:25

两列分区布局：左=流体，右=固定和可滚动

回答

相关问题