html - 使右侧的 Div 填充所有可用空间

Question

我想创建两个并排的 div，但是我希望左侧的一个为 300px，而右侧的一个占据屏幕上的剩余量。这怎么可能？谢谢！

Answer 1

最直接（我会说正确）的方法是使用display: table：

#wrapper {
    display: table;
    width: 100%;
}
#left, #right {
    display: table-cell;
    color: white;
}
#left {
    background: blue;
    width: 300px;
}
#right {
    background: red;
}

<section id="wrapper">
    <aside id="left">Left 300px</aside>
    <div id="right">Right the rest</div>
</section>

http://jsfiddle.net/YbLZE/1/

尝试调整右下框架的大小。

更新了HTML5元素section和aside，如果你有HTML5 doctype. 我必须记住使用那些...

Answer 2

这是工作示例： http: //jsfiddle.net/tnm62/

说明：
1. 将两个元素放在一个容器中。
2. 将左侧元素定位为绝对，将其宽度设置为 300 像素。
3. 将右边元素的左边距设置为 300 像素。

Answer 3

一种解决方案是左侧float: left;较宽，然后适用于您的右侧。以下是基本大纲：div300pxoverflow: hidden;div

HTML：

<div class = "left">
    Glee is awesome!
</div>
<div class = "right">
    Glee is awesome!
</div>

CSS：

.left {
    width: 300px;
    float: left;
}
.right {
    overflow: hidden;
}

还有一个小演示：小链接。

Answer 4

这是适用于较新浏览器（不是 IE）的内容：

CSS：

#container {
    display: box;
}

#left {
    width: 400px;
}

#right {
    box-flex: 1;
}

​<strong>HTML：

<div id="container">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>​

演示：http: //jsfiddle.net/N5zhH/1/

Answer 5

这应该足够了：

<div style="overflow: hidden;">
    <div style="width: 300px; float: left;"></div>
    <div style="margin-left: 300px;"></div>
</div>

• overflow: hidden将拉伸容器 div 以容纳最高的子元素
• float: left将元素向左浮动（doh！）
• width: 300px并margin-left: 300px共同确保如果右列比左列高，它不会流到左浮动 div下方；它将与容器 div 的左边缘保持 300 倍的间隙

提示：更改为margin-left: 320px添加 20px 装订线

这是一个不错的小DEMO