使用动态身高父母时如何阻止孩子修剪?

多汁的

我做了一个这样的面板盒:

的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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何根据父母父母扩大孩子的身高

来自分类Dev

为什么父母的最小身高不能阻止100%身高的孩子崩溃

来自分类Dev

当孩子向左浮动时,父母的身高没有增长

来自分类Dev

使孩子的身高大于父母的身高

来自分类Dev

将孩子的身高设置为父母的身高

来自分类Dev

超过父母身高时如何匹配同胞身高

来自分类Dev

如何在 UWP 中为孩子提供父母的身高

来自分类Dev

父母div的身高比孩子高

来自分类Dev

父母div的身高比孩子高

来自分类Dev

修改孩子身高后如何为父母身高自动设置动画

来自分类Dev

如何将孩子的“ div”身高扩大到父母的身高

来自分类Dev

Bootstrap 4 - 当父母身高比孩子长时,孩子会自动对齐中心(垂直)

来自分类Dev

如何使用jQuery使孩子成为父母的父母?

来自分类Dev

父母身高为自动时身高100%

来自分类常见问题

孩子的边距不会影响父母的身高

来自分类Dev

父母身高不包含绝对定位的孩子

来自分类Dev

弹性盒子的孩子的身高是父母的100%

来自分类Dev

父母身高没有覆盖孩子的填充

来自分类Dev

匹配每个父母中孩子的身高

来自分类Dev

孩子的身高:100%;未取父母的全部身高,为什么?

来自分类Dev

设置相对于孩子身高的父母身高。

来自分类Dev

过滤掉孩子后,如何阻止父母显示?

来自分类Dev

我如何让父母身高增加?

来自分类Dev

阻止孩子遮盖父母的轮廓?

来自分类Dev

我如何使用班级的父母和孩子?

来自分类Dev

如何正确计算孩子的身高

来自分类Dev

父母身高为自动时,身高为100%

来自分类Dev

Android工具栏:孩子与父母身高不匹配

来自分类Dev

绝对将孩子放在没有父母身高的地方

Related 相关文章

热门标签

归档