我在相对容器中有2个绝对定位的div
,我打算使用JavaScript来切换可见性
.container {
position:relative;
}
.section1 {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.section2 {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.section1 .div1 {
background:green;
}
.section1 .div2 {
background:purple;
}
.section1 .div3 {
background:brown;
}
.section1 .div4 {
background:grey;
}
.section2 .div1 {
background:pink;
}
.section2 .div2 {
background:gold;
}
.section2 .div3 {
background:blue;
}
.section2 .div4 {
background:orange;
}
.footer {
background:lightblue;
min-height:100vh;
}
<div class="container">
<div class="section1">
<div class="div1">
This is Item 1
</div>
<div class="div2">
This is Item 2
</div>
<div class="div3">
This is Item 3
</div>
<div class="div4">
This is Item 4
</div>
</div>
<div class="section2">
<div class="div1">
This is Item 1
</div>
<div class="div2">
This is Item 2
</div>
<div class="div3">
This is Item 3
</div>
<div class="div4">
This is Item 4
</div>
</div>
</div>
<div class="footer">
Footer
</div>
它们正常工作,但是我的页脚不起作用。我需要添加透明纸吗?
答案 0 :(得分:0)
您的页脚有min-height 100vh
。也许你的意思是说容器?尝试将其删除,然后将100vh移至容器类。
答案 1 :(得分:0)
我将研究在您的页脚上应用position属性,并删除针对该页脚设置的总体高度。
假设您希望页脚位于底部,则可以向其中添加以下CSS以帮助放置它:
.footer {
background: lightblue;
position:absolute;
bottom:0;
width:100%;
}
body{
margin:0;
}
.container {
position: relative;
margin:0;padding:0;
}
.section1 {
position: absolute;
top: 0;
left: 0;
width:100%;
}
.section2 {
position: absolute;
top: 0;
left: 0;
width:100%;
}
.section1 .div1 {
background: green;
}
.section1 .div2 {
background: purple;
}
.section1 .div3 {
background: brown;
}
.section1 .div4 {
background: grey;
}
.section2 .div1 {
background: pink;
}
.section2 .div2 {
background: gold;
}
.section2 .div3 {
background: blue;
}
.section2 .div4 {
background: orange;
}
.footer {
background: lightblue;
position:absolute;
bottom:0;
width:100%;
}
<div class="container">
<div class="section1">
<div class="div1">
This is Item 1
</div>
<div class="div2">
This is Item 2
</div>
<div class="div3">
This is Item 3
</div>
<div class="div4">
This is Item 4
</div>
</div>
<div class="section2">
<div class="div1">
This is Item 1
</div>
<div class="div2">
This is Item 2
</div>
<div class="div3">
This is Item 3
</div>
<div class="div4">
This is Item 4
</div>
</div>
</div>
<div class="footer">
Footer
</div>