我需要通过子div扩展父div,请看这段代码:
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;
}
演示:JSFIDDLE
问题是 main.content
在#child 相对定位属性中的“top:200”的值上没有完全被#child 垂直展开,我该如何解决?因为它目前与页脚重叠。
最佳答案
实际上,当您使用 position: relative 应用“top”属性时,它不会干扰页面的其他元素。所以它只会与父 div 重叠。尝试使用 margin-top 代替:
#child {
margin-top: 200px;
left:60;
min-height:500;
border: solid 1px white;
}
关于html - 如何通过亲属子DIV扩展父DIV?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21864938/