Css 如何定位收割台、侧箱和主箱？

演示：

HTML:

如何将蓝色框放置在红色框的正下方？例如，我可以添加top:68px；到.sidebox来解决这个问题，但是是否有其他方法可以自动定位它，我想更改页眉高度，而不必强制更改sidebox中的顶部标记以使其适合

我如何定位一个全新的div，它占据了红盒子下和蓝盒子之外的整个白色区域？当收割台/侧箱的高度/宽度发生变化时，这应该是自动的。绿色内容应替换为此新分区：

---

如果您总是希望侧边栏占据窗口的100%，可以尝试以下方法：

html, body { height: 100%; }
.header {
    background-color: red;
    height:60px;
}

.sidebox {
    width: 210px;
    background-color: blue;
    color: black;
    bottom: 0;
    top: 0;
    min-height: 100%;
}

以下是我的尝试：。 关于你的第二个问题，你应该始终在蓝色和黄色框之间有某种关系，像素或百分比更好

.sidebox {
    width: 30%;
    ...
}

.content {
    left:30%;
    ...
}

---

这里似乎是flexbox的一个很好的用例：

以下是相关来源：

HTML

---

希望能有所帮助。

所有不同的浏览器对该实现的支持程度如何？vh、flex？两者都得到了很好的支持。IE10+和所有现代浏览器。

html, body { height: 100%; }
.header {
    background-color: red;
    height:60px;
}

.sidebox {
    width: 210px;
    background-color: blue;
    color: black;
    bottom: 0;
    top: 0;
    min-height: 100%;
}

.sidebox {
    width: 30%;
    ...
}

.content {
    left:30%;
    ...
}

<div class="wrapper">
    <div class="header">header</div>
    <div class="sidebox">sidebox</div>
    <div class="content">content</div>
</div>

body {
    height: 100vh;
    margin: 0;
}
.wrapper {
    display: flex;
    flex-flow: row wrap;
    height: 100%;
}
.header {
    background-color: red;
    height:60px;
    flex: 1 100%;
}

.sidebox {
    flex: 1 auto;
    background-color: blue;
    color: white;
}
.content {
    flex: 4 auto;
    background-color: sienna;
    color: white;
    height: calc(100% - 60px);
}