我有一个网站与以下结构:
<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的高度相同,无论哪个页面被加载?
当前回答
对我有效的是添加 style={{display: 'flex', overflowY: "auto"}} 给所有孩子的父母,然后 style={{overflowY: "auto"}} 对孩子本身。
其他回答
这个技巧确实有用:在HTML部分中添加最后一个元素 具有明确的风格:兼而有之; < div风格= "明确:;" > < / div > 在此之前的所有内容都将包含在高度中。
对我有效的是添加 style={{display: 'flex', overflowY: "auto"}} 给所有孩子的父母,然后 style={{overflowY: "auto"}} 对孩子本身。
这是设计师一直在处理的一个令人沮丧的问题。诀窍是你需要在CSS中的BODY和HTML上设置高度为100%。
html,body {
height:100%;
}
这段看似毫无意义的代码是为了向浏览器定义100%的含义。的确令人沮丧,但这是最简单的方法。
我可能有点晚了,但我找到了一个周围的工作,可能是一个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 */
}
使用jQuery:
$(function() {
function unifyHeights() {
var maxHeight = 0;
$('#container').children('#navigation, #content').each(function() {
var height = $(this).outerHeight();
// alert(height);
if ( height > maxHeight ) {
maxHeight = height;
}
});
$('#navigation, #content').css('height', maxHeight);
}
unifyHeights();
});