20

我只想有一个侧边栏，它将是窗口高度的 100%，但除此之外没有任何作用：

#sidebarBack {
background: rgba(20, 20, 20, .3);
position: fixed;
width: 250px;
height: 100%;
left: 0;
}

我不想拥有position: fixed，因为我有水平滚动的内容，所以固定部分会保持，嗯，固定。

有没有办法做这样的事情，也许是relative或absolute位置？

这是一个用于测试和解释的快速小提琴： JSFiddle

4

5 回答 5

44

您可以使用新的非常有用的-I-can't-imagine-what-took-W3C-so-long vhCSS 单元：

height:100vh;
于 2014-03-23T21:02:57.793 回答
36

tl;博士- 添加html, body {height:100%;}到您的 CSS。

CSS 中的百分比值是从某个已经声明了高度的祖先继承而来的。在你的情况下，你需要告诉你侧边栏的所有父母都是 100% 的高度。我假设那#sidebarBack是body.

本质上，您上面的代码告诉#sidebarBack它是其父级的 100% 高度。它的父级（我们假设）是，所以你也body需要设置height: 100%;。body然而，我们不能止步于此；body从 继承高度html，所以我们还需要设置height: 100%;on html。我们可以在这里停下来，因为html它继承了它的属性viewport，它已经声明了高度100%。

这也意味着如果你最终把#sidebar另一个放在里面div，那div也需要height:100%;。

这是一个更新的 JSFiddle。

将您的 CSS 更改为：

html, body {
    height:100%;
}

#sidebar {
    background: rgba(20, 20, 20, .3);
    width: 100px;
    height: 100%;
    left: 0;
    float:left;
}

section#settings {
    width:80%;   
    float:left;
    margin-left:100px;
    position:fixed;
}
于 2012-11-28T16:19:03.890 回答
7

首先，告诉 body 元素填充窗口，而不是缩小到内容的大小：

body { position: absolute; min-height: 100%; }

通过使用min-height而不是height，当内容比窗口长时，主体将被允许扩展超出窗口的高度（即，这允许在需要时进行垂直滚动）。

现在，将“#sidebar”设置为position:absolute，并使用top:0; bottom:0;它来强制它填充父元素的垂直空间：

#sidebar {
    position: absolute;
    top:0; bottom:0;
    left: 0;
    width: 100px;
    background: rgba(20, 20, 20, .3);
}

这里有几个 jsFiddles：

正如您将看到的，在这两个示例中，我都在“#settings”部分保留了您的宽度设置，从而显示水平滚动按您的要求工作。

于 2012-11-28T17:01:09.003 回答
1

尝试以下

#sidebarBack {
 background: rgba(20, 20, 20, .3);
 position: fixed;
 width: 250px;
 top:0;
 bottom:0;
 left: 0;
}
于 2012-11-28T16:21:49.297 回答
0

试试这个 -

html,body{height:100%;}
#sidebar {
background: rgba(20, 20, 20, .3);
/*position: fixed;*/
width: 100px;
height: 100%;
left: 0;
float:left;
}


section#settings {
width: 62%;
height: auto;
display: inline-block;
position: relative;
margin-left: 100px;
float:left;
}

​</p>

于 2012-11-28T16:25:30.107 回答