Div占据整个剩余宽度[重复]

Posted 2023-03-06

【中文标题】Div占据整个剩余宽度[重复]

【英文标题】：Div to take up entire remaining width [duplicate]

【发布时间】：2013-05-07 21:56:32

【问题描述】：

我有一个父 div 和 2 个 div。第一个子 div 宽 50 像素，高 100%。第二个子 div 是 100% 高度，我要占用其余的宽度（ 100% - 50px ）我该怎么做？

这是我创建的小提琴：http://jsfiddle.net/muGty/ 基本上我希望蓝色 div（右）完全占据灰色容器的其余部分。

<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>

【问题讨论】：

宽度：计算（100% - 50px）；

最好的方法：***.com/a/22719552/759452

【参考方案1】：

你是说喜欢this吗？

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

CSS

html, body 
    height: 100%;


#left 
    width:200px;
    float:left;
    background: #f00;
    height: 100%;

#right 
    margin-left: 200px;
    background: #0f0;
    height: 100%;

更新：

您也可以在 CSS3 中使用 calc() 属性，这样可以简化此过程

html, body 
    height: 100%;


#left 
    width:200px;
    float:left;
    background: #f00;
    height: 100%;


#right 
    float: left;
    background: #0f0;
    height: 100%;
    width: calc(100% - 200px); /* Negate the fixed width element value from 100% */

Demo 2

【讨论】：

请注意...具有“float”属性的元素必须位于标记的顶部。正是外星人先生所写的方式。

如小提琴：jsfiddle.net/F27sW

在尝试了几种解决方案后，这个效果最好！谢谢。

感谢您节省了我的时间

【参考方案2】：

您还可以使用右侧列的绝对位置。考虑这个例子：

.parent
    width:100%;
    height:50px;
    background:#888;
    position:relative

.left
    float:left;
    height:100%;
    width:50px;
    background:green

.right
    background:red;
    position:absolute;
    bottom:0;
    left:50px;
    right:0;
    top:0

另见Fiddle。请注意，您需要在父容器上设置 position: relative 才能使其飞行。

【参考方案3】：

只需将右侧的 div 更改为：

.right
    float:left;
    height:50px;
    width: calc(100% - 50px);
    background-color: blue;
    display:inline-block;

【讨论】：

这与旧浏览器不太兼容。见caniuse.com/calc

【参考方案4】：

如何编辑你的正确类使其看起来像这样：

.right
  float:left;
  height:50px;
  width: 100%;
  margin-right:-50px;
  background-color: blue;
  display:inline-block;

【参考方案5】：

您可以为right 添加一个 50px 的边距并将其浮动。