html - 如何在CSS中制作此布局，divs正在崩溃

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

（刚意识到正常div也会缩小内容的大小，最小高度完全没用吗？）

我需要两个div，一个在左边，另一个在右边。左一个为100px宽，并保持这种状态。而right div会无限扩展，并且不会缩小到400px以上。两个Divs应该都是父级的高度。父级没有确切的高度，但最小高度为800。因此，如果这2个div之一的内容是推动div的高度并将其扩展。然后，parent的高度应增加，从而其他div的高度也应增加。

我尝试使用浮点数。我设法做到了。但是左侧在浮动左侧，其高度持续崩溃，并且未遵循“高度：100％”规则。仅当父级具有确定的宽度时才起作用。

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



为什么世界上css没有合适的内容，可填充的对象，选择％所指的对象，选择要针对的对象，使用vector或使用png来成形div，插入文本阴影等。

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

最佳答案

尝试为孩子使用display:table和display:table-cell，您需要为左div给定with

演示-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>