如何使这个布局在css中，div正在崩溃。

Question

JsFiddle：http://jsfiddle.net/techsin/csfvb91u/

(刚刚意识到正常的div对内容的大小也崩溃了，最小高度完全没用吗？)

我需要两个div，一个是左，另一个是右。左一是100便士宽，并停留在这条路。然而，right div 无限扩展，并且不会超过400‘t。两者都应该是父母的身高。亲本没有精确的高度，但的最小高度为800。因此，如果这两个div的内容之一是推动div的高度并扩展它。这样，亲本的高度就应该增加，其他地方的高度也会随之增加。

我试过用浮标。我在某种程度上成功了。而左侧浮起的左侧，其高度持续塌陷，不遵循高度:100%的规则。只有当父母有一定的宽度时，它才能起作用。

我试过使用内联块，但是右div不会扩展到填充可用空间。

​

​

为什么在世界上css没有适合-内容，填充-可用，选择什么%引用，选择什么位置对，使用向量或使用pngs形状div，嵌入文本阴影等。

<div class="cont">
    <div class="a"></div>
    <div class="b"></div>
</div>

Answer 1

尝试使用display:table和display:table-cell用于子级，您需要为左div提供固定的

演示- http://jsfiddle.net/z90fma6e/

​

html,
body {
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
.cont {
  display: table;
  height: 100%;
}
.left,
.right {
  height: 100%;
}
.left {
  width: 200px;
  background: red;
  display: block;
}
.right {
  width: 100%;
  display: table-cell;
  background: green;
}

<div class="cont">
  <div class="left">fixed
    <br/>height adjusts</div>
  <div class="right">expands
    <br/>height adjusts</div>
</div>

​

Answer 2

听起来你的div要崩溃了。您将需要一个明确的补丁，您可以添加到div。有几种方法可以做到这一点；但是，这个选项是最好的。

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

将这个清除类和css添加到您的div中，这样它们就不会崩溃。

你可以在cssTricks上读到更多关于它们的信息。

Answer 3

CSS灵活布局的完美用例：

<style>
  body {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
  }
  div:first-child {
    width: 200px;
    background: red;
  }
  div:last-child {
    flex: 1;
    background: blue;
  }
</style>

<div></div>
<div></div>