我有一个网站与以下结构:
<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的高度相同,无论哪个页面被加载?
当前回答
2021年的读者:
试试这个:
.parent {
position: relative;
display: flex; // And you will probably need this too.
flex-direction: row; // or column.
}
.child {
position: absolute;
top: 0;
bottom: 0;
align-self: center; // And you will probably need this too.
}
以下是我正在做的事情:
其他回答
我可能有点晚了,但我找到了一个周围的工作,可能是一个hack。 首先给父层一个弯曲和100vh的高度
就像这样:
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;/* Can be less depends on the container, basically this forces the element to expand */
}
如果你不介意导航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 */
}
除此之外,还有假柱技术。
我发现,设置两列显示:table-cell;代替float: left;工作得很好。
2021年的读者:
试试这个:
.parent {
position: relative;
display: flex; // And you will probably need this too.
flex-direction: row; // or column.
}
.child {
position: absolute;
top: 0;
bottom: 0;
align-self: center; // And you will probably need this too.
}
以下是我正在做的事情:
对于父节点:
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 >