CSS/HTML 中没有可见宽度的侧边栏

Question

有没有办法在 css/html 中实现以下行为：

请注意，绿色侧边栏不必响应，但我不能给它一个固定的宽度

width: XX px;

因为可以包含或多或少的元素，所以事先对XX没有概念。

棕色条必须响应并占用所有剩余宽度。

提前感谢您提供任何技巧！我已经尝试过表格但没有成功，因为我们无法指定 div 来将其限制在必要的范围内。

Answer 1

您可以使用 Flexbox，如果您在右侧 div 设置 flex: 1 它将占用剩余的自由 space 和宽度left div 仍然是动态的。

.parent {
  display: flex;
  border: 2px solid black;
}
.left {
  background: #22B14C;
  padding: 10px;
}
.right {
  background: #EFE4B0;
  padding: 10px;
  flex: 1;
}
span {
  margin: 0 20px;
}

<div class="parent">
  <div class="left"><span>Span</span><span>Span</span></div>
  <div class="right">Right</div>
</div>

这也可以用 CSS Table layout 你只需要在 .right 上设置 width: 100% div 它将占用剩余的免费 space

.parent {
  display: table;
  border: 2px solid black;
}
.left {
  background: #22B14C;
  display: table-cell;
  padding: 10px;
}
.right {
  background: #EFE4B0;
  display: table-cell;
  width: 100%;
  padding: 10px;
}
span {
  margin: 0 20px;
}

<div class="parent">
  <div class="left"><span>Span</span><span>Span</span></div>
  <div class="right">Right</div>
</div>

Answer 2

您可以使用 flexbox 轻松实现这一目标。这是示例： http://codepen.io/anon/pen/JKXXNE

#container {
  display:flex;
}
#sidebar, #content {
  height: 100px;
}
#sidebar {
  background-color: green; 
}
#content {
  background-color: brown;
  flex: 1;
}

Answer 3

对于旧版浏览器，请使用 display: table

html, body{
  height: 100%;
  margin: 0;
}
.tbl{
  display:table;
}
.row{
  display:table-row;
}
.cell{
  display:table-cell;
}
.content{
  width: 100%;
}
#left_col {
  background: orange none repeat scroll 0 0;
  width: 1%;
}
#right_col {
  background: green none repeat scroll 0 0;
  width: 100%;
}

<div class="tbl content">
  <div class="row">
    <div id="left_col" class="cell">
      wide&nbsp;content&nbsp;<br>
      content&nbsp;<br>
      wider&nbsp;contentcontent&nbsp;<br>
    </div>
    <div id="right_col" class="cell"></div>
  </div>
</div>

Answer 4

不使用 flexbox 实现此 的另一种方法可以是：

工作Fiddle:

https://jsfiddle.net/y00e5w6m/ （请注意，我使用示例 css 和输入只是为了展示如何做到这一点。这应该根据要求进行一些调整）

示例输出：

Html:

<div style="float:left;width:100%;border:1px solid #000;"> <div id="dynamic-content" style="float:left;background-color:#090;border:1px solid #900"> <div style="float;left;"> Mango </div> <div style="float;left;margin-left:5px;"> Banana </div> <div style="float;left;margin-left:5px"> Orange </div> </div> <div id="other-content" style="float:left;background-color:#630;border:1px solid #009;"> </div> </div>

JS:

var items=["mango","grapes","banana"]; var windowWidth = $(window).width(); console.log(windowWidth); var dynamicContentWidth = $("#dynamic-content").width(); console.log(dynamicContentWidth); var otherContentWidth = dynamicContentWidth >= windowWidth ? windowWidth : windowWidth-dynamicContentWidth-20; console.log(otherContentWidth); $("#other-content").width(otherContentWidth); $("#other-content").height($("#dynamic-content").height());

CSS/HTML 中没有可见宽度的侧边栏

side bar with a no previsible width in CSS/HTML

html

css

html-table

responsive