浮动边栏：如何获得 window 的边栏全高？

Question

我知道会有人要求完整的代码，但我只是在非常一般的意义上要求。

比如说，我让主要内容向左浮动，没有固定高度，侧边栏向右浮动。我希望边栏占据浏览器的整个高度 window，即使主要内容的长度增加也是如此。

主要内容和侧边栏的容器也没有固定高度：

#container {
margin: 0 auto;
padding: 0;
max-width: 1024px;
position: relative;
background: url(../img/booksbg.jpg) fixed;
background-size: cover;
overflow: hidden;
}

我该怎么做？该站点响应媒体查询。

我试过：

sidebar {
height: 100vh; 
}

但这似乎不适用于边栏。

Answer 1

给侧边栏 position:absolute; 和 100% 高度就可以了。 http://jsfiddle.net/07zLb3xx/

#sidebar {
    height: 100%;
    position: absolute;
    right: 0;
}

如果侧边栏超出父包装器有问题，请像这样 http://jsfiddle.net/07zLb3xx/1/

给父包装器 position:relative;

浮动边栏：如何获得 window 的边栏全高？

Floated Sidebar: How to get sidebar full height of window?

css

height

equals

viewport

sidebar