如何通过亲子DIV扩展父DIV? [英] How to expand parent DIV by relative child DIV?
问题描述
我需要通过子div扩展父div,请看这段代码:
HTML
< div class =wrapper>
< header class =header> < /报头>
< div class =middle>
< div class =container>
< main class =content>
< div id =child>
< p> 1< / p>
< p> 1< / p>
< p> 1< / p>
< p> 1< / p>
< p> 1< / p>
< p> 1< / p>
< p> 1< / p>
< p> 1< / p>
< p> 1< / p>
< p> 1< / p>
< p> 1< / p>
< / div>
< / main>
< / div>
< aside class =left-sidebar>< / aside>
< / div>
< footer class =footer>< / footer>
< / div>
CSS
.wrapper {
width:500px;
margin:0 auto;
min-height:100%;
}
.header {
height:100px;
背景:蓝色;
}
.footer {
height:60px;
宽度:100%;
底部:0;
头寸:相对;
背景:黄色;
clear:left;
}
.middle {
width:100%;
min-height:300px;
头寸:相对;
}
.container {
min-height:300px;
宽度:100%;
float:left;
}
.content {
宽度:800;
min-height:300px;剩余
:280;
头寸:相对;
背景:红色;
填充:10px;
}
#child {
position:relative;
top:100px;
left:160px;
min-height:500px;
width:200px;
border:solid 1px white;
背景:绿色;
}
.left-sidebar {
float:left;
宽度:100px;
min-height:500px;
保证金余额:-100%;
职位:亲属;
背景:黑色;
}
DEMO: JSFIDDLE
问题在于 main.content
没有完全通过#child在#child相对定位属性中的top:200的值上完全展开,我该如何解决它?因为它现在与页脚重叠。
实际上,当您将top属性应用于position:relative时, t干扰页面的其他元素。所以它会重叠父div。请尝试使用margin-top代替:
#child {
margin-top:200px;
剩下:60;
最小高度:500;
border:固体1px白色;
}
I need to expand parent div by child div, please look at this code:
HTML
<div class="wrapper">
<header class="header"> </header>
<div class="middle">
<div class="container">
<main class="content">
<div id="child">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
</main>
</div>
<aside class="left-sidebar"></aside>
</div>
<footer class="footer"></footer>
</div>
CSS
.wrapper {
width: 500px;
margin: 0 auto;
min-height: 100%;
}
.header {
height: 100px;
background: blue;
}
.footer {
height: 60px;
width: 100%;
bottom: 0;
position: relative;
background:yellow;
clear:left;
}
.middle {
width: 100%;
min-height: 300px;
position: relative;
}
.container {
min-height: 300px;
width: 100%;
float: left;
}
.content {
width: 800;
min-height: 300px;
left: 280;
position: relative;
background:red;
padding:10px;
}
#child {
position:relative;
top:100px;
left:160px;
min-height:500px;
width: 200px;
border: solid 1px white;
background:green;
}
.left-sidebar {
float: left;
width: 100px;
min-height: 500px;
margin-left: -100%;
position: relative;
background: black;
}
DEMO: JSFIDDLE
the problem is that main.content
is not fully expanded by #child vertically on the value of "top:200" that is in #child relative positioning properties, how can I fix it? because it currently overlaps the footer.
Actualy, when ou apply the "top" property with position: relative, it doesn't interfeer on the other elements of the page. so it will just overlap the parent div. Try using margin-top instead:
#child {
margin-top: 200px;
left:60;
min-height:500;
border: solid 1px white;
}
这篇关于如何通过亲子DIV扩展父DIV?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!