Question

好的，我看到了几个类似问题的例子，但似乎没有回答我当前的具体问题。我所要做的就是让侧导航使用100％的高度。我已尝试过多次尝试高度，浮动，位置，但它似乎仍然只在加载时填充渲染的视口。如何让它可靠地拉伸所有内容的整个高度？如果你只是向下滚动下面的例子，你会明白我的意思。

示例：Codepen

我尝试了一些类似的事情;

position:absolute;
left:0;top:0;bottom:0;

  float: left;

。

height: 100%

当我经历从我的网络技能中剔除灰尘的过程时，我偶尔会感到谦卑。所以，如果有一个完全重复，我没有找到只是让我知道，我会del这个问题。谢谢！

Answer 1

您可以使用jQuery获取页面的高度，然后将导航设置为页面的高度：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">

<script>

$(function(){

var height = $(window).height();
$("#nifty-sidenav").height(height+"px");

});

</script>

Answer 2

您是否尝试使用固定的？我试过了，导航栏也增长了。

或者，如果您可以使用200％或300％可能符合您的需要

Answer 3

给出位置：相对于父母

在这种情况下：

body {
    position:relative;
}

滚动位置绝对导航问题的全高

3 个答案: