保证金最高100％-父级股息的高度

JacobTheDev 发表于 Dev

雅各布·德夫

我要构建以下布局：

基本上，我需要三个高度各不相同的div，它们的标头高度都应从其父级的顶部100％处减去标头的高度。我可以使用jQuery来做到这一点，但这是一个响应性网站，因此我希望使其尽可能保持基于CSS的风格（否则我将不得不处理$(window).resize()，根据我的经验，这可能是不可靠的）。

是否有可能使用CSS3calc功能？

谢谢。

LJ沃多夫斯基

因此，您可以尝试将内容（橙色容器）添加到蓝色容器（取决于您可以使用的html结构position: absolute或margin-top橙色容器）的底部。

比您可以将标头（绿色）容器放入橙色容器中，并将其放置在绝对顶部-100％的位置（橙色位置必须为absolute或relatve）。

如果您将添加html，那么将更容易找到更精确的解决方案。

JSFIDDLE与示例

CSS：

.box{
   background: #f00;
   height: 150px;
   width: 100%;
   position: relative;
   padding: 20px;
   padding-bottom: 0;
}
.column{
    background: #0f0;
    width: 30%;
    position: relative;
    top: 100%
}
.header{
    position: absolute;
    bottom: 100%;
    width: 100%;
    background: #00f;
 }

HTML：

<div class="box">
    <div class="column">
        <div class="header">
           header 
        </div>
        aaaaaaa<br/>
        aaaaaa
    </div>    
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。