Question

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

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

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

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

这是一个快速的小提琴，只是为了测试和解释： JSFiddle

Answer 1

你可以使用新的，非常有用的 - 我无法想象 - 花了很长时间的{3}} CSS单元：

height:100vh;

Answer 2

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

CSS中的百分比值是从已声明高度的某个祖先继承的。在您的情况下，您需要告诉您的侧边栏的所有父母是100％身高。我假设#sidebarBack是body的直接孩子。

基本上，上面的代码告诉#sidebarBack其父级的高度为100％。其父（我们假设）是 body ，因此您还需要在height: 100%;上设置body。但是，我们不能止步于此; body从 html 继承了高度，因此还需要在height: 100%;上设置html。我们可以在此处停止，因为html从viewport继承了其属性，该属性已声明高度为100%。

这也意味着如果您最终将#sidebar置于另一个div内，那么div也需要height:100%;。

这是 Updated 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;
}

Answer 3

首先，告诉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”部分保留了您的宽度设置，从而显示水平滚动按您的要求工作。

Answer 4

尝试以下

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

Answer 5

试试这个 -

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

如何制作100％窗口高度的div？

5 个答案: