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

我想创建两个并排的div，但是我希望左侧的一个是300px，右侧的一个占据屏幕上的剩余部分。那怎么可能呢？谢谢

这是一个工作示例：

解释：
1.将两个元素放在一个容器中。
2.将左元素置于绝对位置，将其宽度设置为300px。

---

3.将右元素的左边距设置为300px。

这是一个工作示例：

解释：
1.将两个元素放在一个容器中。
2.将左元素置于绝对位置，将其宽度设置为300px。
3.将右边元素的左边距设置为300px。

最直接（我要说是正确的）方法是使用

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>

#包装器{
显示：表格；
宽度：100%；
}
#左，#右{
显示：表格单元格；
颜色：白色；
}
#左{
背景：蓝色；
宽度：300px；
}
#对{
背景：红色；
}

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

更新了
HTML5
元素
部分
和
旁白
，如果您有
HTML5文档类型
，应该使用这些元素。我必须记住使用这些…
最直接（我要说是正确的）方法是使用
显示：表格
：

#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>

#包装器{
显示：表格；
宽度：100%；
}
#左，#右{
显示：表格单元格；
颜色：白色；
}
#左{
背景：蓝色；
宽度：300px；
}
#对{
背景：红色；
}

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

更新了
HTML5
元素
部分
和
旁白
，如果您有
HTML5文档类型
，应该使用这些元素。我必须记住使用这些…
一个解决方案是
浮动：左
左侧
div
宽，即
300px
然后应用
溢出：隐藏在您的右侧
div
。以下是基本纲要：

HTML:

还有一个小演示：。
一个解决方案是
浮动：左
左侧
div
宽，即
300px
然后应用
溢出：隐藏在您的右侧
div
。以下是基本纲要：

HTML:

还有一个小演示：。
这里有一些针对新浏览器（不是IE）的东西：

CSS：

#container {
    display: box;
}

#left {
    width: 400px;
}

#right {
    box-flex: 1;
}

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

​HTML：

#container {
    display: box;
}

#left {
    width: 400px;
}

#right {
    box-flex: 1;
}

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


左边
赖特
​

演示：
以下是针对较新浏览器（不是IE）的内容：

CSS：

#container {
    display: box;
}

#left {
    width: 400px;
}

#right {
    box-flex: 1;
}

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

​HTML：

#container {
    display: box;
}

#left {
    width: 400px;
}

#right {
    box-flex: 1;
}

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


左边
赖特
​

演示：
这应该足够了：

<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倍的间隙

提示：更改为
左边距：320px
以添加20px的边沟

这是一个不错的小建议，应该足够了：

<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倍的间隙

提示：更改为
左边距：320px
以添加20px的边沟

这里有一个很好的小宽度：自动；但是你的内容大小很重要；但是你的内容大小很重要。这会起作用，但这也是由于旧浏览器功能的问题而导致的
float
的（长期）损坏。@JaredFarrish Yep，我只想提到另一种方法供参考，因为你已经建议使用CSS表。这会起作用，但也是一种（长期）损坏
float
由于旧浏览器功能的问题而损坏。@JaredFarrish是的，我只想提及另一种方法供参考，因为您已经建议使用CSS表。MDN似乎建议使用标准，这与（显然是旧的和废弃的？
box-
CSS3标准草案不同。我对这整件事有些陌生（比如，新的），所以我将让MDN链接自己说话（不管它说什么…）。但是，如果得到适当支持，这似乎是处理此问题的最“自然”的方式，而不仅仅是
display:table
。MDN似乎建议使用标准，这与（显然较旧且已废弃的？
box-
CSS3标准草案不同。我对这整件事有些陌生（比如，新的），所以我将让MDN链接自己说话（不管它说什么…）。但是，如果得到适当的支持，这似乎是最“自然”的处理方法，而不仅仅是
显示：table
。使用CSS布局将块元素显示为表格单元格没有任何意义。使用CSS布局将块元素显示为表格单元格没有任何意义。对不起，使用float是一种攻击。至少
表格单元格
在显示方面完全做到了它的本意；在我看来，一个旨在改进有缺陷的IE6行为的黑客是比较次要的方法。Flexbox（正如Blender或多或少展示的那样）是唯一“正确”的方式，在我看来也是过时的方式。我只是想它会在一段时间内被完全采用。我仍然认为表格是表格数据，而不是布局。但你完全有权不同意。不过，使用css与语义无关。使用
table
标记是语义，但用于显示，