【问题标题】:div height at 100% but there is space on top and/or bottom stilldiv 高度为 100%,但顶部和/或底部仍有空间
【发布时间】:2015-04-23 22:14:32
【问题描述】:

我正在尝试制作一个带有position: fixedheight: 100% 的侧边导航栏,但是当我尝试这样做时,总是有空间你可以看到div 下方或上方的背景。顺便说一句,我也尝试让height1000px 一样,但我仍然遇到同样的问题。

HTML:

<div id='navbar'></div>

CSS:

#navbar {
  background-color:black;
  width:100px;
  height:100%;
  z-index:99;
  position:fixed;
  left:-10px;
  bottom:10px;
}

JSFiddle

【问题讨论】:

  • 在这种情况下,bottom:10px 表示#navbar 的底部从其容器底部开始向上 10px。见bottom @ MDN
  • @showdev 评论是正确的。无论如何,也许您可​​以使用vh 而不是百分比,这取决于您尝试使用的浏览器support

标签: html css navbar


【解决方案1】:

我猜您将bottom: 10px 设置为将您的#navbar 推到您最初拥有10px 间距的顶部,这会导致底部间距相同。您可以通过将top: 0; bottom: 0;(您应该删除bottom: 10px;)应用到#navbar 元素来强制您的元素从其父高度的开始/结束处拉伸。

附: top: 0 是多余的,但我已经设置它来演示这个概念。

JSFiddle

【讨论】:

  • 希望他能选择你的答案,毕竟你是第一个回答者。
【解决方案2】:

https://jsfiddle.net/7oxyvab5/2/

导航栏在 CSS 中设置了 10px 的底部。

#navbar {
 background-color:black;
 width:100px;
 height:100%;
 z-index:99;
 position:fixed;
 left:-10px;
 bottom:0px;
}

【讨论】:

    猜你喜欢
    • 2011-10-18
    • 2012-08-03
    • 1970-01-01
    • 2012-07-09
    • 1970-01-01
    • 2012-04-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多