html - 嵌套的最大宽度和最小宽度 div

Question

我正在尝试创建以下布局。

我正在尝试使黄色和红色方 block 流动，同时保持绿色和蓝色方 block 的最大宽度。 See this fiddle .

当我尝试扩大屏幕尺寸时，绿色 block 会从布局的其余部分剪切掉。

当我尝试缩小屏幕尺寸时，黄色 block 出现了。

HTML代码

<div id="sidebar">
</div>
<div id="content">
    <div id="block1">
    </div>
    <div id="block2">
    </div>
</div>

Answer 1

像这样尝试: Demo

将此添加到您的代码中:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}