html - 如何使 div 扩展到页面的高度？

Question

我试图让蓝色的 div 扩展到页面的高度，但似乎没有任何效果: JSFiddle

CSS:

/* Reset */
html,body {
    width:100%;
    height:100%;
    margin:0px;
}

/* General */
.clear {
    clear:both;
}

/* Page Layout */
#page {
    margin-left:250px;
    min-height:100%;
    background-color:green;
}

#main {
    float:right;
    width:100%;
    background-color:blue;
    height:100%;
}

#sidebar {
    float:left;
    width:250px;
    margin-left:-250px;
    background-color:#222629;
    min-height:100%;
}

和 html:

<div id="page">
    <div id="main">
        main
    </div>
    <div id="sidebar">
        <ul>
           <li>something</li>
           ...
           <li>something</li>
        </ul>
    </div>
    <div class="clear"></div>
</div>

如果页面比侧边栏内容长得多，侧边栏也需要这样做。

Answer 1

将这个添加到 fiddle 的底部，我想这是你想要的。

#main {
    height: 100vh;
}

https://jsfiddle.net/ac1p22r4/

这是一些额外的润色 https://jsfiddle.net/ssj3xtr7/