2栏100％布局 - 1个固定柱和1分动态列

基本上，容器是具有100％的宽度（即，其将填充整个页面的），它会具有两列：2栏100％布局 - 1个固定柱和1分动态列

第1列是导航栏，应保持固定宽度，例如200像素
列2是内容领域，应当有没有具体的宽度 - 它应该只是填充剩余的区域，并调整根据屏幕/窗口尺寸，

什么是实现这一目标的最佳方式是什么？

XHTML：

<body> 
    <div id="container"> 
     <div id="navbar"> 
      &nbsp; 
     </div> 

     <div id="content"> 
      &nbsp; 
     </div> 
    </div> 
</body>

CSS：

#container { float: left; width: 100%; } 
#navbar { float: left; width: 200px; height: 800px; } 
#content { float: left; height: 800px; ??? }

来源

2012-03-11 GSTAR

见[此]（http://www.dynamicdrive.com/style/layouts/category/C9/） – dotoree 2012-03-11 17:49:27

我会做到这一点是设置在容器和内容div的最小宽度，对内容的div左边距的方式，允许它在导航div旁边滑动。左边距加上最小宽度应等于容器的最小宽度。我已经添加了边框，因此您可以看到它的尺寸正确。

#container 
{ 
    width: 100%; 
    min-width: 960px; 
} 

#nav 
{ 
    float: left; 
    width: 200px; 
    height: 100%; 
    min-height: 800px; 
    border: 1px solid #ff0000; 
} 

#content 
{ 
    margin-left: 205px; 
    min-width: 755px; 
    height: 100%; 
    min-height: 800px; 
    border: 1px solid #0000ff; 
}

小提琴在http://jsfiddle.net/bmMTW/

来源

2012-03-11 18:03:10 tvanfosson

2栏100％布局 - 1个固定柱和1分动态列

回答

相关问题