我有一个网站与以下结构:
<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的高度相同,无论哪个页面被加载?
当前回答
如前所述,flexbox是最简单的。 如。
#main{ display: flex; align-items:center;}
这将使所有子元素对齐到父元素的中心。
其他回答
使用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();
});
对我有效的是添加 style={{display: 'flex', overflowY: "auto"}} 给所有孩子的父母,然后 style={{overflowY: "auto"}} 对孩子本身。
这个答案是不理想的,因为CSS flexbox和网格实现到CSS。然而,这仍然是一个可行的解决方案
在一个较小的屏幕上,你可能希望保持高度自动,因为col1, col2和col3是相互堆叠的。
然而,在媒体查询断点之后,您希望所有列的cols都以相同的高度紧挨着出现。
1125 px只是窗口宽度断点的一个例子,在此之后,您将希望将所有列设置为相同的高度。
<div class="wraper">
<div class="col1">Lorem ipsum dolor sit amet.</div>
<div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
<div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>
当然,如果需要,还可以设置更多的断点。
<script>
$(document).ready(function(){
$(window).on('load resize', function() {
let vraperH = $('.wraper').height();
if (window.innerWidth>= 1125) {
$('.col1').height(vraperH);
$('.col2').height(vraperH);
$('.col3').height(vraperH);
}
if (window.innerWidth < 1125) {
$('.col1').height('auto');
$('.col2').height('auto');
$('.col3').height('auto');
}
});
});
</script>
注意:此答案适用于不支持Flexbox标准的旧浏览器。有关现代方法,请参见:https://stackoverflow.com/a/23300532/1155721
我建议你看看跨浏览器CSS的等高列,没有黑客。
基本上,以浏览器兼容的方式使用CSS来实现这一点并不简单(但是对于表来说很简单),所以请找到一个适当的预打包解决方案。
同样,答案也取决于你想要100%的高度还是相同的高度。通常都是等高的。如果是100%高,答案就略有不同。
(在另一个回答中提到了Dmity的Less代码)我猜这是某种“伪代码”?
据我所知,尝试使用人造柱技术应该可以做到这一点。
http://www.alistapart.com/articles/fauxcolumns/
希望这对你有所帮助。