我有一个网站与以下结构:
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
导航栏在左边,内容div在右边。内容div的信息是通过PHP拉入的,因此每次都是不同的。
我怎样才能垂直缩放导航,使其高度与内容div的高度相同,无论哪个页面被加载?
我有一个网站与以下结构:
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
导航栏在左边,内容div在右边。内容div的信息是通过PHP拉入的,因此每次都是不同的。
我怎样才能垂直缩放导航,使其高度与内容div的高度相同,无论哪个页面被加载?
当前回答
这是设计师一直在处理的一个令人沮丧的问题。诀窍是你需要在CSS中的BODY和HTML上设置高度为100%。
html,body {
height:100%;
}
这段看似毫无意义的代码是为了向浏览器定义100%的含义。的确令人沮丧,但这是最简单的方法。
其他回答
这是设计师一直在处理的一个令人沮丧的问题。诀窍是你需要在CSS中的BODY和HTML上设置高度为100%。
html,body {
height:100%;
}
这段看似毫无意义的代码是为了向浏览器定义100%的含义。的确令人沮丧,但这是最简单的方法。
如果你不介意导航div在意外的短内容div事件中被剪辑,至少有一个简单的方法:
#main {
position: relative;
}
#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}
#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}
除此之外,还有假柱技术。
这段代码非常适合我
<html>
<body style="display: flex;">
<div style="position: absolute; width: 100%; height: 100%; background-color: aliceblue">
<table style="width: 100%; height: 100%;">
<tr>
<td style="width: 70%; background-color: green"></td>
<td style="background-color: red"></td>
</tr>
</table>
</div>
</body>
试着让最低利润率达到100%。
margin-bottom: 100%;
高度:< % >将只工作,如果你所有的父节点都具有指定的百分比高度和固定的高度(像素,ems等)在顶层。这样,高度就会随你的喜好而下降。
您可以像前面提到的@Travis那样为html和body元素指定100%,以使页面高度向下级联到节点。