无法获得侧边栏高度:100%

时间:2017-04-20 07:43:12

标签: html css

我最近一直在学习CSS,我试图理解为什么我无法正确显示侧边栏。

https://jsfiddle.net/bnu0Ljuo/1/

在我的代码中,我添加了

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

这使得侧边栏延伸,但它带有额外的滚动条。 当没有理由进行滚动时,会有一个滚动条。此外,如果我添加足够的文本来填充内容div,我将无法看到数据。见这里:

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

请注意您无法向下滚动以查看“TEST无法查看文本”。这怎么样?

3 个答案:

答案 0 :(得分:2)

你想要这个吗? See this fiddle

我替换选择器并将min-height添加到html, body。我还删除了overflow: hidden;上的.container并将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;
}

答案 1 :(得分:0)

我不知道你想要实现什么,但如果你设置了

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

您的所有内容都可见。

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

答案 2 :(得分:0)

嗯,芒果很简单。使用以下代码:

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

您告诉selectors身高100%。在这种情况下,100%是屏幕高度viewport。添加的额外空间是height的{​​{1}}。要解决此问题,请告知header最小selectors高度。

所以改变一下:

100%

<强>到

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

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