强制绝对div来听父母的填充? [英] Force absolute div to listen to parent's padding?
本文介绍了强制绝对div来听父母的填充?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是我的HTML / CSS 目前:
这里是我想要的 p>
>
如何修改下面的HTML / CSS,以便它显示我的想法?
HTML:
< div id =panel>
< div id =bottom>
< div class =update>< / div>
< / div>
< / div>
CSS:
code> .update {
width:100%;
background-color:#006699;
text-align:center;
height:56px;
颜色:白色
}
#bottom {
position:absolute;
bottom:20px;
width:100%;
left:0;
}
#panel {
width:21.25%;
height:100%;
background-color:#0794ea;
float:left;
padding:0 1.5%;
-moz-box-sizing:border-box;
box-sizing:border-box;
position:relative;
}
感谢
您的HTML将看起来像这样:
< div id =panel>
< div class =wrapper>
< div id =bottom>
< div class =update>
a
< / div>
< / div>
< / div>
< / div>
和您的CSS:
#panel {
width:21.25%;
height:100%;
background-color:#0794ea;
float:left;
padding:0 1.5%;
box-sizing:border-box;
}
.update {
width:100%;
background-color:#006699;
text-align:center;
height:56px;
颜色:白色
}
.wrapper {
position:relative;
height:100%;
}
#bottom {
position:absolute;
bottom:20px;
left:0;
width:100%;
background:yellow;
}
下面是一个笔的最终结果:http://codepen.io/DanielVoogsgerd/pen/Lezjy
This is what my HTML/CSS currently looks like:
Here is what I want it to look like:
How can I modify the HTML/CSS below so that it shows how I want it to?
HTML:
<div id="panel">
<div id="bottom">
<div class="update"></div>
</div>
</div>
CSS:
.update {
width: 100%;
background-color: #006699;
text-align: center;
height: 56px;
color: white;
}
#bottom {
position: absolute;
bottom: 20px;
width: 100%;
left: 0;
}
#panel {
width: 21.25%;
height: 100%;
background-color: #0794ea;
float: left;
padding: 0 1.5%;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
Thanks
解决方案
You can fix the issue using a wrapper
Your HTML will look something along these lines:
<div id="panel">
<div class="wrapper">
<div id="bottom">
<div class="update">
a
</div>
</div>
</div>
</div>
And your CSS:
#panel {
width: 21.25%;
height: 100%;
background-color: #0794ea;
float: left;
padding: 0 1.5%;
box-sizing: border-box;
}
.update {
width: 100%;
background-color: #006699;
text-align: center;
height: 56px;
color: white;
}
.wrapper {
position: relative;
height: 100%;
}
#bottom {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
background: yellow;
}
Here is a pen with the end result: http://codepen.io/DanielVoogsgerd/pen/Lezjy
这篇关于强制绝对div来听父母的填充?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文