Html 使一个 div 填满剩余的宽度

Make a div fill up the remaining width

提问by raklos

How can I make a div fill up the remaining width?

如何让 div 填满剩余的宽度？

<div id="Main" style="width: 500px;">
    <div id="div1" style="width: 100px;"></div>
    <div id="div2"></div>
    <div id="div3" style="width: 100px; float: right;"></div>
</div>

How can I get div2to fill up the remainder?

我怎样才能div2填补剩余部分？

采纳答案by Leigh

Try out something like this:

尝试这样的事情：

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="left-div">
        left div
    </div>
    <div id="right-div">
        right div
    </div>
    <div id="middle-div">
        middle div<br />bit taller
    </div>
</div>

divs will naturally take up 100% width of their container, there is no need to explicitly set this width. By adding a left/right margin the same as the two side divs, it's own contents is forced to sit between them.

div 自然会占据其容器的 100% 宽度，无需显式设置此宽度。通过添加与两侧 div 相同的左/右外边距，它自己的内容被迫位于它们之间。

Note that the "middle div" goes afterthe "right div" in the HTML

请注意，“中间格”云后的HTML“正确的div”

回答by Adrien Be

Up-to-date solution (October 2014) : ready for fluid layouts

最新解决方案（2014 年 10 月）：为流畅的布局做好准备

---

---

Introduction:

介绍：

This solution is even simpler than the one provided by Leigh. It is actually based on it.

这种解决方案甚至比 提供的解决方案更简单Leigh。它实际上是基于它。

Here you can notice that the middle element (in our case, with "content__middle"class) does nothave any dimensional property specified - no width, nor padding, nor margin related property at all - but only an overflow: auto;(see note 1).

在这里，你可以看到，中间元素（在本例中，有"content__middle"类）并没有具有规定的任何尺寸属性-根本没有宽度，也没有填充物，也没有相关的利润财产-但只有一个overflow: auto;（见注1）。

The great advantage is that now you can specify a max-widthand a min-widthto your left & right elements. Which is fantastic for fluid layouts.. hence responsivelayout :-)

最大的优点是现在您可以为左右元素指定 amax-width和 amin-width。这对于流体布局来说非常棒......因此响应式布局:-)

note 1: versus Leigh's answer where you need to add the margin-left& margin-rightproperties to the "content__middle"class.

注意 1：与 Leigh 的答案相比，您需要将margin-left&margin-right属性添加到"content__middle"类中。

---

---

Code with non-fluid layout:

具有非流体布局的代码：

Here the left & right elements (with classes "content__left"and "content__right") have a fixed width(in pixels): hence called non-fluid layout.

这里的左右元素（带有类"content__left"和"content__right"）具有固定的宽度（以像素为单位）：因此称为非流体布局。

Live Demo on http://jsbin.com/qukocefudusu/1/edit?html,css,output

http://jsbin.com/qukocefudusu/1/edit?html,css,output 上的现场演示

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content {
        width: 100%;
    }
    .content__left {
        width: 100px;
        float: left; /* [1] */
        background-color: #fcc;
    }
    .content__middle {
        background-color: #cfc;
        overflow: auto; /* [2] */
    }
    .content__right {
        width: 100px;
        float: right; /* [3] */
        background-color: #ccf;
    }
</style>

<div class="content">
    <div class="content__left">
        left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

---

---

Code with fluid layout:

具有流体布局的代码：

Here the left & right elements (with classes "content__left"and "content__right") have a variable width(in percentages) but also a minimum and maximum width: hence called fluid layout.

这里的左右元素（带有类"content__left"和"content__right"）具有可变宽度（以百分比为单位），但也有最小和最大宽度：因此称为流体布局。

Live Demo in a fluid layout with the max-widthproperties http://jsbin.com/runahoremuwu/1/edit?html,css,output

带有max-width属性http://jsbin.com/runahoremuwu/1/edit?html,css,output的流体布局中的实时演示

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content { 
        width: 100%; 
    }
    .content__left { 
        width: 20%; 
        max-width: 170px;  
        min-width: 40px;  
        float: left; /* [1] */
        background-color: #fcc; 
     }
    .content__middle { 
        background-color: #cfc; 
        overflow: auto; /* [2] */
    }
    .content__right { 
        width: 20%; 
        max-width: 250px; 
        min-width: 80px; 
        float: right; /* [3] */
        background-color: #ccf; 
    }
</style>

<div class="content">
    <div class="content__left">
        max-width of 170px & min-width of 40px<br />left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        max-width of 250px & min-width of 80px<br />right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

---

---

Browser Support

浏览器支持

Tested on BrowserStack.com on the following web browsers:

在 BrowserStack.com 上在以下 Web 浏览器上进行了测试：

• IE7 to IE11
• Ff 20, Ff 28
• Safari 4.0 (windows XP), Safari 5.1 (windows XP)
• Chrome 20, Chrome 25, Chrome 30, Chrome 33,
• Opera 20

• IE7 到 IE11
• FF 20, FF 28
• Safari 4.0 (Windows XP)、Safari 5.1 (Windows XP)
• 铬 20、铬 25、铬 30、铬 33、
• 歌剧20

回答by B T

Flex-boxes are the solution - and they're fantastic. I've been wanting something like this out of css for a decade. All you need is to add display: flexto your style for "Main" and flex-grow: 100(where 100 is arbitrary - its not important that it be exactly 100). Try adding this style (colors added to make the effect visible):

Flex-boxes 是解决方案 - 它们非常棒。十年来，我一直想从 css 中得到这样的东西。您所需要的只是display: flex为“Main”添加样式和flex-grow: 100（其中 100 是任意的 - 它是否正好是 100 并不重要）。尝试添加此样式（添加颜色以使效果可见）：

<style>
    #Main {
        background-color: lightgray;
        display: flex;
    }

    #div1 {
        border: 1px solid green;   
        height: 50px; 
        display: inline-flex; 
    }
    #div2 {
        border: 1px solid blue;    
        height: 50px;
        display: inline-flex;
        flex-grow: 100;
    }
    #div3 {
        border: 1px solid orange;        
        height: 50px;
        display: inline-flex;
    }
</style>

More info about flex boxes here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

有关 flex 框的更多信息，请访问：https: //css-tricks.com/snippets/css/a-guide-to-flexbox/

回答by Reggie Pinkham

Flexbox solution

弹性盒解决方案

.main {
  display: flex;
}
.col-1, .col-3 {
  width: 100px;
}
.col-2 {
  flex-grow: 1;
}

<div class="main">
  <div class="col-1" style="background: #fc9;">Left column</div>
  <div class="col-2" style="background: #eee;">Middle column</div>
  <div class="col-3" style="background: #fc9;">Right column</div>
</div>

Note:Add flex vendor prefixes if required by your supported browsers.

注意：如果您支持的浏览器需要，请添加 flex 供应商前缀。

回答by Sunny R Gupta

Although a bitlate in posting an answer, here is an alternative approach without using margins.

尽管bit发布答案较晚，但这是一种不使用边距的替代方法。

<style>
    #divMain { width: 500px; }
    #div1 { width: 100px; float: left; background-color: #fcc; }
    #div2 { overflow:hidden; background-color: #cfc; }
    #div3 { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="div1">
        div 1
    </div>
    <div id="div3">
        div 3
    </div>
    <div id="div2">
        div 2<br />bit taller
    </div>
</div>

This method works like magic, but hereis an explanation :)\

这种方法很神奇，但这里有一个解释:)\

Fiddle with a similar sample here.

在这里摆弄一个类似的样本。

回答by Avishek Bose

The Div that has to take the remaining space has to be a class.. The other divs can be id(s) but they must have width..

必须占用剩余空间的 Div 必须是一个类.. 其他 div 可以是 id(s) 但它们必须有宽度..

CSS:

CSS:

#main_center {
    width:1000px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    display:block;
}
#left {
    width:200px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    background:#c6f5c6;
    float:left;
}
.right {
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    overflow:hidden;
    background:#000fff;
}
.clear {
    clear:both;
}

HTML:

HTML:

<body>
    <div id="main_center">
        <div id="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
    </div>
</body>

The following link has the code in action, which should solve the remaining area coverage issue.

以下链接包含正在运行的代码，它应该可以解决剩余区域覆盖问题。

jsFiddle

js小提琴

回答by damndaewoo

I was looking for a solution to the opposite problem where I needed a fixed width div in the centre and a fluid width div on either side, so I came up with the following and thought I'd post it here in case anyone needs it.

我正在寻找相反问题的解决方案，我需要在中心有一个固定宽度的 div，在两侧有一个流体宽度的 div，所以我想出了以下内容，并认为我会在这里发布，以防有​​人需要它。

#wrapper {
  clear: both;
  width: 100%;
}

#wrapper div {
  display: inline-block;
  height: 500px;
}

#center {
  background-color: green;
  margin: 0 auto;
  overflow: auto;
  width: 500px;
}

#left {
  float: left;
}

#right {
  float: right;
}

.fluid {
  background-color: yellow;
  width: calc(50% - 250px);
}

<div id="wrapper">
  <div id="center">
    This is fixed width in the centre
  </div>
  <div id="left" class="fluid">
    This is fluid width on the left
  </div>
  <div id="right" class="fluid">
    This is fluid width on the right
  </div>
</div>

If you change the width of the #centerelement then you need to update the width property of .fluidto:

如果更改#center元素的宽度，则需要将 width 属性更新.fluid为：

width: calc(50% - [half of center width]px);