CSS：使 div 填充右侧的剩余空间，而不会溢出内部内容答案

【问题标题】：CSS: Make a div fill remaining space on right-hand side, without inner content overflowingCSS：使 div 填充右侧的剩余空间，而不会溢出内部内容
【发布时间】：2016-05-21 01:28:22
【问题描述】：

我有一个固定宽度的左 div，我想让右 div 填充剩余空间。

到目前为止，我一直是taking this approach recommended by another SO poster，但如果我在正确的 div 中有内容，它就不起作用。

右侧div中的内容设置为width: 100%，所以我希望它不会比右侧div宽，但它会溢出右侧div。

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

<style>
#left {
    float:left;
    width:180px;
    background-color:#ff0000;
}
#right {
    width: 100%;
    background-color:#00FF00;
}
#insideright { 
    width: 100%; 
    background-color: blue; 
    height: 5px;
}
</style>

这里是JSFiddle，演示问题：http://jsfiddle.net/MHeqG/155/

我能做什么？

我想支持较旧的 IE 浏览器，所以如果可以避免的话，我宁愿不使用 display: table-cell 等，或者至少在没有合理回退的情况下不使用。

【问题讨论】：

您能否通过引用您正在谈论的 div 的实际 id 来澄清您的问题？ “右侧 div 中的内容...”哪个右侧 div？
请定义“旧浏览器”
它会溢出，因为您将其宽度属性设置为浮动元素旁边的 100% 屏幕。它一直持续下去，因为没有任何因素可以阻止它。你应该在浮动后使用明确的修复
你想一起避免溢出还是只溢出到最左边？

标签： css html

【解决方案1】：

其实很简单...不要将100%添加到正确的div :)
只需添加overflow 属性

LIVE DEMO

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  overflow:auto;
  background-color:#00FF00;
}
#insideright { 
  background-color: blue; 
}

...如果您甚至想知道如何使红色（左）div 填充剩余的高度... DEMO

【讨论】：

我正要发布你的第二个演示的确切内容......很好
@JonP 谢谢！，是的，我马上就做到了，所以以后不需要再做。如果不是由 OP 可能会被其他人询问。

【解决方案2】：

不确定您要做什么（您对right 的引用不明确）。但如果我理解的话，您希望 insideright 嵌套在 right 内而不会溢出？

为什么不改用<span>？开箱即用的<div> 是display: block;，它将强制进行这样的换行。或者，使用display: inline; 或display: inline-block; 覆盖此行为。

<div>
    <div id="left">
        left
    </div>
    <div id="right">
        right
        <span id="insideright">this should not overflow right</span>
    </div>
</div>

http://jsfiddle.net/brandonscript/MHeqG/157/

【讨论】：

我同意，如果你可以使用<span> 这样做。
这不是真的，只需添加一个<br>，您就处于问题的开头。
@RokoC.Buljan 会溢出right 而不是insideright？真的，在这种情况下很难解决这个问题——我需要看一个真实的例子来改进答案。当然，除非我们在谈论 overflow: hidden; 或 white-space: no-wrap;，但这是一个完全不同的问题/答案。