【问题标题】:height: 100% background sidebar doesn't work高度:100% 背景侧边栏不起作用
【发布时间】:2016-05-11 03:07:35
【问题描述】:

如何添加背景高度:100% 放在一边?

aside,
.side-nav {
    width: 250px;
    float: left;
    margin-right: 15px;
    background-color: #2b2b2b;
}

如何修复侧边栏(旁边)?

【问题讨论】:

  • 你可以添加你正在使用的html吗?尝试提供帮助
  • 相信我,它有父母。如果你做对了,"minimum" 就是<body>
  • 百分比高度要求父级设置高度。高度可以设置任何度量单位,但需要设置。
  • 将位置定义为绝对位置。然后根据需要设置高度(和宽度)。

标签: javascript css height sidebar


【解决方案1】:

使用 CSS3,您实际上可以使用“vh”名称(基于视口高度)。

对于您的示例,您只需将“height: 100vh”添加到您的 css。

【讨论】:

  • OP 可能希望侧边栏成为页面的高度,该高度可能会根据内容以及可能的条件(例如最小高度)而有所不同。您在此处将侧边栏设置为设定的高度。如果用户必须滚动五次才能查看页面的所有内容,那么当他们到达页面底部时,侧边栏早就消失了。
【解决方案2】:

我创建了一个小例子。请查看下面的 jsfiddle 链接。

<https://jsfiddle.net/whfukm5p/>

【讨论】:

【解决方案3】:

我认为您需要的是固定而不是浮动的导航。

aside, .side-nav { width: 250px; margin-right: 15px; background-color: #2b2b2b; position: fixed; left: 0; top: 0; bottom: 0; overflow: auto; }

高度是基于父元素的相对值,但是由于Window没有默认高度,所以不能使用元素的相对高度。

如果您坚持使用相对高度,则需要通过 javascript 设置或给它一个默认值。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-07-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-05-26
    • 1970-01-01
    • 2013-10-05
    相关资源
    最近更新 更多