Question

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

在我的代码中，我添加了

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

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

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

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

Answer 1

你想要这个吗？ 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;
}

Answer 2

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

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

您的所有内容都可见。

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

Answer 3

嗯，芒果很简单。使用以下代码：

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/

无法获得侧边栏高度：100％

3 个答案: