CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – 保证金100% – 父母的身高大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下布局来构建:

基本上,我需要三个不同高度的div,具有不同的头部高度,从它们的父母顶部位于100%,减去头部的高度.我可以用jQuery做这个,但这是一个敏感的网站,所以我想保持它作为基于CSS的可能(否则我将不得不处理$(窗口).resize(),这在我的经验可以不可靠).

这是可能的,也许使用CSS3 calc功能?

谢谢.

解决方法

所以你可以尝试添加内容(橙色容器)粘在蓝色容器的底部(取决于你的html结构,你可以使用position:absolute或margin-top在橙色容器中).

你可以把标题(绿色)的容器放在橙色的容器里,把它放在绝对顶部-100%(橙色位置必须是绝对的或相对的).

如果你添加你的html,那将很容易找到更精确的解决方案.

JSFIDDLE with an example

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>

大佬总结

以上是大佬教程为你收集整理的css – 保证金100% – 父母的身高全部内容,希望文章能够帮你解决css – 保证金100% – 父母的身高所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。