我有一个网站与以下结构:
<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的高度相同,无论哪个页面被加载?
当前回答
对于父节点:
display: flex;
您应该添加一些前缀,例如http://css-tricks.com/using-flexbox/。
正如@Adam Garner所指出的,align-items:拉伸;不需要。它的用法也适用于父母,而不是孩子。如果你想定义儿童拉伸,你使用align-self。
.parent { 背景:红色; 填充:10 px; 显示:flex; } .other-child { 宽度:100 px; 背景:黄色; 身高:150 px; 填充:.5rem; } .child { 宽度:100 px; 背景:蓝色; } < div class = "父" > < div class = "另一个孩子“> 仅用于拉伸父节点 < / div > < div class = "孩子" > < / div > < / div >
其他回答
注意:此答案适用于不支持Flexbox标准的旧浏览器。有关现代方法,请参见:https://stackoverflow.com/a/23300532/1155721
我建议你看看跨浏览器CSS的等高列,没有黑客。
基本上,以浏览器兼容的方式使用CSS来实现这一点并不简单(但是对于表来说很简单),所以请找到一个适当的预打包解决方案。
同样,答案也取决于你想要100%的高度还是相同的高度。通常都是等高的。如果是100%高,答案就略有不同。
你可以把display: flex到div#主,align-self: stretch到div#导航。
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
// CSS file
#main {
display: flex;
}
#navigation {
align-self: stretch;
}
#main {
display: table;
}
#navigation, #content {
display: table-cell;
}
看看这个例子。
经过长时间的寻找和尝试,没有什么能解决我的问题
style = "height:100%;"
关于儿童div
对于父母应用这个
.parent {
display: flex;
flex-direction: column;
}
此外,我使用bootstrap,这并没有腐败的响应为我。
试着让最低利润率达到100%。
margin-bottom: 100%;