Fiddle with Flexbox

Question

HTML：

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

CSS：

.header {
    background-color: red;
    height:60px;
}

.sidebox {
    width: 210px;
    background-color: blue;
    color: black;
    position: absolute;
    bottom: 0;
    top: 0;
}

如何将红色框放在红色框下面？我可以例如将top: 68px;添加到.sidebox以解决问题但是还有其他任何方法可以自动定位它，我想更改标题高度而不必强制更改sidebox中的顶部标记使它适合。
如何定位一个全新的div，它占据红框下面的整个白色区域以及蓝框？如果标题/边框改变高度/宽度，这应该是自动的。绿色内容应替换为新的div：http://i.gyazo.com/a41107cb7c1844b439f045ad85d40aec.png

Answer 1

如果您总是希望侧边栏占据窗口的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%;
}

http://jsfiddle.net/zz1ou0bv/2/

Answer 2

这是我的尝试：http://jsfiddle.net/rL8z9bm0/ 关于你的第二个问题，你应该总是在蓝色和黄色方框之间有某种关系，无论是像素还是百分比（更好）

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

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

Answer 3

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

Fiddle with Flexbox

以下是相关来源：

<强> HTML

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

<强> CSS

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);
}

希望有所帮助。

如何定位标题，侧边栏和主框？

3 个答案:

Fiddle with Flexbox