我有一个网站与以下结构:
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
导航栏在左边，内容div在右边。内容div的信息是通过PHP拉入的，因此每次都是不同的。
我怎样才能垂直缩放导航，使其高度与内容div的高度相同，无论哪个页面被加载?
当前回答
这段代码非常适合我
<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>
其他回答
我发现，设置两列显示:table-cell;代替float: left;工作得很好。
要做到这一点，最简单的方法就是假装。《A List Apart》多年来对此进行了广泛的报道，比如Dan Cederholm 2004年的一篇文章。
我通常是这样做的:
<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
<div id="navigation" style="float:left;width:190px;padding-right:10px;">
<!-- Navigation -->
</div>
<div id="content" style="float:left;width:750px;">
<!-- Content -->
</div>
</div>
您可以通过将#container包装在另一个div中，将标题div嵌入为#container的兄弟，并将边缘和宽度样式移动到父容器中，轻松地在此设计中添加标题。此外，CSS应该移动到一个单独的文件，而不是保持内联等等。最后，clearfix类可以在positioniseverything上找到。
高度:< % >将只工作，如果你所有的父节点都具有指定的百分比高度和固定的高度(像素，ems等)在顶层。这样，高度就会随你的喜好而下降。
您可以像前面提到的@Travis那样为html和body元素指定100%，以使页面高度向下级联到节点。
试着让最低利润率达到100%。
margin-bottom: 100%;
这段代码非常适合我
<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>
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
