我做了一个这样的面板盒:
的HTML
<section class="panel">
<div class="title">Hot</div>
<div class="content">
<a href="">Article</a>
<a href="">Article</a>
<a href="">Article</a>
<a href="">Article</a>
<a href="">Article</a>
<a href="">Article</a>
</div>
</section>
的CSS
#body #rightPanel .panel {
width: 220px;
height: calc((100% - 160px) / 2);
overflow: hidden;
}
#body #rightPanel .panel .content {
width: calc(100% - 2px);
height: calc(100% - 34px);
}
#body #rightPanel .panel .content a {
width: 100%;
height: 27px;
display: block;
}
该面板根据视口大小具有动态大小,并且几乎可以按照我的期望进行工作。但是,如果您看下面的图片,您会注意到一个明显的问题:最后一个元素被裁剪。
仅当可以完整显示子元素时,才如何显示它?对孩子来说是全有还是全无?
我希望使用纯CSS解决方案,但是我不介意使用一些JS / jQuery。
编辑
如果有人绊倒这里寻找答案:亚当的答案行得通,但最终超出了需要的范围。我将他的代码略微简化为:
function resizePanelArticles() {
var panelHeight = $(".content").height();
$("a").show().each(function() {
if ($(this).position().top > panelHeight) {
$(this).hide();
}
});
}
我可以想到的没有javascript的唯一方法就是将更height: calc((100% - 160px) / 2);
改为min-height: calc((100% - 160px) / 2);
。这并不是您真正想要的,因为它将为其余的对象留出足够的空间,而不是将它们砍掉,但这是我能想到的唯一的CSS唯一方法。
这可以很容易地用javascript完成。基本上,我们遍历每个a
元素,并使用来获取元素底部的位置,$(this).position().top + $(this).outerHeight()
并对照容器进行检查。我们也在加载窗口和调整窗口大小时执行此操作,这是因为它是动态高度,因此会发生变化,这意味着如果调整窗口大小,则必须重新计算。
function resize(){
var c = $('.panel .content').innerHeight();
$('.panel .content a').show().each(function(){
if($(this).position().top + $(this).outerHeight() > c){
$(this).hide();
}
});
}
$(window).on('load resize', resize);
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句