我在页面的左侧有一个导航栏,我想让它伸展到页面高度的100%。不仅是视口的高度,还包括滚动之前隐藏的区域。我不想用javascript来完成这个。

它能在HTML/CSS中完成吗?


当前回答

如果你的目标是更现代的浏览器,事情可以非常简单。 试一试:

.elem{    
    height: 100vh;
 }

如果你需要它在页面的50%,将100替换为50。

其他回答

如果你的目标是更现代的浏览器,事情可以非常简单。 试一试:

.elem{    
    height: 100vh;
 }

如果你需要它在页面的50%,将100替换为50。

你可以使用伪列来作弊 或者您可以使用一些CSS技巧

使用表格很简单:

<html>

<head>
    <title>100% Height test</title>
</head>

<body>
    <table style="float: left; height: 100%; width: 200px; border: 1px solid red">
        <tbody>
            <tr>
                <td>Nav area</td>
            </tr>
        </tbody>
    </table>
    <div style="border: 1px solid green;">Content blabla... text
        <br /> text
        <br /> text
        <br /> text
        <br />
    </div>
</body>

</html>

当DIV被引入时,人们非常害怕表格,可怜的DIV变成了隐喻的锤子。

使用绝对位置。注意,这不是我们通常使用的绝对位置,它需要手动布局东西或有浮动对话框。这将在您调整窗口或内容大小时自动拉伸。我相信这需要标准模式,但可以在IE6及以上版本中工作。

只需要用你的内容替换id ' content'的div(这里指定的高度只是为了说明,你不需要在实际内容上指定高度。

<div style="position: relative; width: 100%;">
      <div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
      <div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
         <div style="height: 10000px;" id="thecontent"></div>
      </div>
</div>

这种工作方式是外部div作为导航栏的参考点。外部div由'content' div的内容展开。导航条使用绝对定位将自身延伸到其父div的高度。对于水平对齐,我们让内容div的偏移量与导航条的宽度相同。

这在CSS3 flex box模型中变得更加容易,但IE中还没有,并且有一些它自己的怪癖。

我遇到了和你一样的问题。我想做一个DIV作为背景,为什么,因为它很容易通过javascript操作DIV。无论如何,我在css中为那个div做了三件事。

CSS:

{    
position:absolute; 
display:block; 
height:100%; 
width:100%; 
top:0px; 
left:0px; 
z-index:-1;    
}