[英]How to expand parent DIV by relative child DIV?
I need to expand parent div by child div, please look at this code: 我需要按子div扩展父div,请查看以下代码:
HTML 的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 的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;
}
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? 问题是, main.content
没有完全#child垂直的“顶:200”的价值扩大了在#child相对定位性质,如何解决呢? 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. 实际上,当您将“ top”属性应用于position:relative时,它不会干扰页面的其他元素。 so it will just overlap the parent div. 因此它将与父div重叠。 Try using margin-top instead: 尝试使用margin-top代替:
#child {
margin-top: 200px;
left:60;
min-height:500;
border: solid 1px white;
}
You need to clear:left; 您需要清除:left; on the footer. 在页脚上。
.footer {
clear:left;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.