带侧边栏的布局答案

【问题标题】：Layout with sidebar带侧边栏的布局
【发布时间】：2014-03-19 08:01:07
【问题描述】：

我无法让我的布局按照它想要的方式工作......

我有一个position:absoluteheader、一个float:leftaside侧边栏和一个position:absolutediv#page

现在，无论我尝试什么，我都无法让侧边栏一直延伸到页面底部。

编辑：这里是： http://jsfiddle.net/JY9y9/

【问题讨论】：

发布更多 HTML 和 CSS。如果可能的话，把它放在小提琴里。
@zero298 所指的站点：jsfiddle.net
jsfiddle.net/JY9y9
你可以做 height: 100vh;更多信息在这里w3.org/TR/css3-values/#viewport-relative-lengths。但请注意，不支持 > IE 8

标签： html css layout

【解决方案1】：

尝试将position:absolute; min-height: 100%; 添加到您的.sidebar 选择器中。

检查这个小提琴：http://jsfiddle.net/JY9y9/6/

【讨论】：

【解决方案2】：

我为你做了这个：

<aside class="sidebar">
    hello
</aside>
<div id='page'>
hello
</div>

.sidebar{
    position:absolute;
    float:left;
    padding: 0 0 3em 0;
    width: 37%;
    background-color:#333;
    color: #fff;
    height:100%;
}

#page{
    float:left;
    background-color:blue;
    color:#fff;
    margin-left:39%;
    width: 61%;
}

http://jsfiddle.net/K9V2r/2/?

这可能有点快速和混乱，但它确实有效。我希望我理解正确，这对你有帮助！ :D

【讨论】：