Question

尝试在包装器div中浮动两个div，其中只有侧边栏具有基于％的宽度。主div需要根据侧边栏的宽度拉伸，填充包装的剩余区域（即它没有自己设置的宽度）。

<div class="wrapper">
   <div class="sidebar"></div>
   <div class="main"></div>
</div>

以下是获得这个想法的fiddle：

我尝试了inline-block，float:left，float:right等各种变体，似乎无法让它发挥作用。

Answer 1

这个问题可以通过两种不同的方式解决：

予。 SIDE和BODY有自己的滚动条

在这种情况下，sidebar将拥有自己的滚动条，main也将拥有自己的滚动条。当您不想在滚动主要内容时滚动侧边栏时，此方法很有用。

使整页尺寸包装：

.wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

侧边栏的CSS将是：

.sidebar {
    background: blue;
    width: 20%;
    height: 100%;
    float: left;
    overflow: auto;
}

你的主要人物：

.main {
    background: red;
    height: 100%;
    overflow: auto;
}

[!]您可以在FIDDLE。

II。 SIDE和BODY将按WRAPPER

滚动

在这种情况下，sidebar和main内容都将由主wrapper滚动。要创建此内容，只需float侧边栏和主要内容。

.main {
    background: red;
    width: 80%;
    float: left;
}
.sidebar {
    background: blue;
    width: 20%;
    float: left;
}

[!]您可以在FIDDLE。

Answer 2

根据您提供的代码：

<div class="wrapper">
    <div class="sidebar"></div>
    <div class="main"></div>
</div>

我认为这个css会做你所要求的：

.sidebar {
    float:left;
    width:20%;
}

.main {
    margin:0 0 0 20%;
}

假设您不希望.main div内容包装在.sidebar下面;和.main将占用父.wrapper所用的剩余空间。

支持也应该回归。

Answer 3

这里有你的解决方案

http://jsfiddle.net/YKPy5/

<pre>
    <div class="wrapper">
      <div class="main">
        <div class="sidebar">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        </div>
      </div>
    </div>


  .wrapper {
    background: 000;
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 200px;
}
  .main {
    background: red;
    display: inline-block;
    min-height: 200px;
}
  .sidebar {
    background: blue;
    width: 20%;
    min-height: 200px;
    display: inline-block;
}

</pre>

请注意：没有宽度，任何内联/内联块元素都不会创建任何空格。你必须添加内容/文字才能获得效果，

浮动div而不设置宽度

3 个答案:

予。 SIDE和BODY有自己的滚动条

II。 SIDE和BODY将按WRAPPER