Question

我试图构建一个简单的布局，但我一直在寻找一个可靠的css hack。

我需要的是一个动态宽度的大容器，它有两列。右侧的那个基本上是侧边栏，具有固定的宽度。左边的那个是内容区域，需要相对大小。

但我无法指定一个百分比。如果大容器是页面的80％（在某种情况下让我们说600px），并且侧边栏是固定宽度的200px，那么左列应该是66％（400px）。但这必须随时改变，因为大容器本身是相对的，并且它不会一直是600px。

所以，如果大容器是1000px，那么左列应该是（1000-200）800px，这是80％。所以我猜这是一种双重关系。

我可以用JavaScript完成效果。我将创建一个函数来计算容器中的空闲空间并将其分配给左列，并在初始化时调用此函数一次，在调整大小的侦听器中调用一次。

但是这种方法在速度方面缺乏性能。有时候它是马车。我想知道如何用纯CSS做到这一点。如果你查看Youtube的主页，你会发现我的意思。左侧的列和右侧的列（推荐的通道）具有静态宽度。但是，中间的主要区域仍设有相对宽度。

HTML：

   <div id="main">

     <div id="left">
     </div>

     <div id="right">
     </div>

   </div>

CSS：

   #main
   {
      width: 80%;
      min-height: 1000px;
   }

   #left, #right
   {
      float: left;
      height: auto;
   }

   #right
   {
      width: 200px;
   }

   #left
   {
      /* how can I make this relative to its parent and in the same time not push the righ column, which will, at some point, be too big for the container? */
   }

Answer 1

您需要使用display:table和display:table-cell来正确定位您的div：

此处示例：http://jsfiddle.net/4zFeC/

 #main {
     width: 80%;
     min-height: 100px;
     border:4px solid blue;
     display:table;
 }
 #left, #right {
     min-height: 100px;
     display:table-cell;
 }
 #right {
     width: 200px;
     border:4px solid red;
 }
 #left {
     border:4px solid green;
 }

Answer 2

您可以这样做：

HTML：

<div class="container">
    <div class="sidebar">SideBar</div>
    <div class="content">Content</div>
</div>

CSS：

.container {
    width: 100%;
    height: 600px;
    background-color: green;
}
.sidebar {
    float: right;
    width: 200px;
    height: 100%;
    background-color: yellow;
}
.content {
    background-color: red;
    height: 100%;
    width: auto;
}

DEMO HERE

动态大小的容器相对于静态容器

2 个答案:

HTML：

CSS：