左 div 百分比宽度，右填充剩余空间答案

【问题标题】：left div percentage width, right fills remaining space左 div 百分比宽度，右填充剩余空间
【发布时间】：2016-12-19 13:48:38
【问题描述】：

我有一个左 div 向左浮动，宽度为百分比，右 div 向左浮动，我想占用剩余空间，这是一个 [fiddle]：https://jsfiddle.net/gfhfku8k/。感谢您提前提供任何帮助。

HTML：

<div class="container">
  <div class="left">

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

  </div>
</div>

CSS：

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
}
.left {
  width: 30%;
  height: 100%;
  float: left;
  border: 1px solid #000;
  overflow: hidden;
}
.right {
  height: 100%;
  /* width: 30px; */
  overflow: hidden;
  float: left;
  border: 1px solid #f00;
}

【问题讨论】：

什么都不看 - 你试过在右边的 div 上设置 70% 的宽度吗？当然你需要设置 box-sizing:border-box
你想让 .right div 保持全宽吗？
是的，我希望右 div 占据剩余空间，但左 div 的宽度会改变宽度。 30% 只是一个例子，抱歉应该指定。

标签： html css

【解决方案1】：

假设将width: 70% 放在右列不是您想要的，这种布局最容易使用flex 完成。以下是它的工作原理：

请注意，我删除了列上的 float 属性，并将 box-sizing: border-box 添加到所有元素 (*) 以使其正常工作（尽管此演示不需要它）。

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}
* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  /* flex */
  display: flex;
}
.left,
.right {
  border: 1px solid #000;
  overflow: hidden;
}
.left {
  background: pink;
  width: 30%;
}
.right {
  background: blue;
  /* flex */
  flex-grow: 1;
}

<div class="container">

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

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

</div>

【讨论】：

谢谢您的回答。我以前没有使用过 flex，但我一定要开始学习它。

【解决方案2】：

你可以试试这个

.right {
  height: 100%;
  overflow: hidden;
  border: 1px solid #f00;
}

只需从 .right 类中删除 float:left。

【讨论】：