无法获取边栏到高度：100％

我最近一直在学习CSS，我试图理解为什么我无法让我的边栏正确显示。无法获取边栏到高度：100％

在我的代码，我已经加入

html, body, .container, .sidebar, .content { 
    height: 100%; 
}

这使得侧边栏扩展，但它带有一个附加滚动。没有理由需要滚动时有滚动。另外，如果我添加足够的文本来填充内容div，我将无法看到数据。在这里看到：你

https://jsfiddle.net/bnu0Ljuo/5/

注意怎么也无法向下滚动查看“测试不能见文”。这怎么样？

来源

2017-04-20 Richard Cole

你想要这个吗？ See this fiddle

我替换选择器并将min-height添加到html, body。我还对.container去除overflow: hidden;并添加height: 100vh;到.sidebar：

.container, .sidebar, .content { 
    height: 100%; 
} 

div#container { 
    width: 100%; 
    margin: 0 auto; 
    position: relative; 
    height: 100%; 
} 

html, body { 
    min-height: 100%; 
} 

.sidebar { 
    height: calc(100vh - 60px); 
    min-height: 100%; 
    top: 0; 
}

来源

2017-04-20 07:45:21

是的，但是在第一的jsfiddle，这是行不通的。证明：https://jsfiddle.net/bnu0Ljuo/8/ –

@RichardCole我没有看到问题。你提供的“不工作证明”的jsfiddle对我来说工作得很好。与它有什么关系？ – frikinside

这几乎解决了，但仍然没有解决。我只想知道为什么现在底部有一个额外的空间可以滚动（https://jsfiddle.net/bnu0Ljuo/16/）。有没有办法去除这个空间？ –

我不知道你想达到什么，但如果你设置

html, body, .container, .sidebar, .content { 
    height: auto; 
    min-height: 100vh; 
}

所有的内容是可见的。

https://jsfiddle.net/ab51xj8u/2/

来源

2017-04-20 07:46:55 RacoonOnMoon

当内容不够低时不起作用，例如：https：//jsfiddle.net/bnu0Ljuo/9/ –

min-height：auto;不会工作 – RacoonOnMoon

https://jsfiddle.net/ab51xj8u/ – RacoonOnMoon

嘛，awnser是非常简单的。用下面的代码：

html, body, .container, .sidebar, .content { 
    height: 100%; 
}

你是在告诉selectors是100%高度。在这种情况下，100%是屏幕的高度，即viewport。增加的额外空间是header的height。要解决此问题，请告知selectors高度为最小值100%。

所以更改此设置：

html, body, .container, .sidebar, .content { 
    height: 100%; 
}

为：

html, body, .container, .sidebar, .content { 
    min-height: 100%; 
}

https://jsfiddle.net/bnu0Ljuo/14/

来源

2017-04-20 08:48:33 Red

无法获取边栏到高度：100％

回答

相关问题