我有一个网站与以下结构:
<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的高度相同,无论哪个页面被加载?
当前回答
这段代码非常适合我
<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>
其他回答
(在另一个回答中提到了Dmity的Less代码)我猜这是某种“伪代码”?
据我所知,尝试使用人造柱技术应该可以做到这一点。
http://www.alistapart.com/articles/fauxcolumns/
希望这对你有所帮助。
我的解决方案:
$(window).resize(function() {
$('#div_to_occupy_the_rest').height(
$(window).height() - $('#div_to_occupy_the_rest').offset().top
);
});
这道题的题目和内容有点矛盾。标题说的是父div,但问题让它听起来像你想要两个兄弟div(导航和内容)是相同的高度。
你(a)希望导航和内容都是主高度的100%,还是(b)希望导航和内容是相同的高度?
我假设(b)……如果是这样的话,我不认为你将能够做到这一点,因为你目前的页面结构(至少,不是纯CSS和没有脚本)。你可能需要这样做:
<main div>
<content div>
<navigation div></div>
</div>
</div>
并将内容div设置为左侧空白,无论导航窗格的宽度是多少。这样,内容的内容就在导航栏的右边,你可以将导航栏的高度设置为内容高度的100%。
编辑:我完全是在我的头脑中做的,但你可能还需要将导航div的左侧空白设置为负值,或将它的绝对左侧设置为0,以将它推回到最左边。问题是,有很多方法可以实现这一点,但并不是所有的方法都能与所有浏览器兼容。
经过长时间的寻找和尝试,没有什么能解决我的问题
style = "height:100%;"
关于儿童div
对于父母应用这个
.parent {
display: flex;
flex-direction: column;
}
此外,我使用bootstrap,这并没有腐败的响应为我。
这段代码非常适合我
<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>