如何让一个容器在移动视图中向下推动另一个容器？

我想要container-2是完全可见的，但box2中的框覆盖了它在移动视图中。我不希望大小与box2中的方框有任何不同，我只想要container 2被推下来，以便在移动设备中完全可见。如何让一个容器在移动视图中向下推动另一个容器？

body { 
 
    margin: 0; 
 
    width: 100%; 
 
} 
 
.container { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: rgb(152, 152, 152); 
 
} 
 
.container-2 { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: rgb(46, 6, 6); 
 
} 
 
.box-container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.box1 { 
 
    background-color: rgb(65, 186, 186); 
 
    width: 50%; 
 
    height: 100%; 
 
} 
 
.box2 { 
 
    background-color: rgb(92, 191, 124); 
 
    width: 50%; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
} 
 
@media (max-width: 600px) { 
 
    .box1 { 
 
    background-color: rgb(65, 186, 186); 
 
    width: 100%; 
 
    height: 50%; 
 
    } 
 
    .box2 { 
 
    background-color: rgb(92, 191, 124); 
 
    width: 100%; 
 
    height: 50%; 
 
    } 
 
}

<body> 
 

 
    <div class="container"> 
 
    <div class="box-container"> 
 
     <div class="box1"> 
 

 
     </div> 
 
     <div class="box2" id="box"> 
 
     <div class="box1" style="background-color: blue; height: 50%;"></div> 
 
     <div class="box1" style="background-color: green; height: 50%;"></div> 
 
     <div class="box1" style="background-color: yellow; height: 50%;"></div> 
 
     <div class="box1" style="background-color: orange; height: 50%;"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container-2"> 
 
    </div> 
 
</body> 
 

 
</html>

来源

2016-05-15 sydluce

我已经测试过你的代码，但是我不清楚你遇到了什么问题。对我来说似乎工作正常，但仍然是凌晨3点，所以它可能无法帮助我。 – dippas

box2内的框包含移动视图中的容器2。 – sydluce

我已经在移动视图中进行了测试，并且可以完美地看到'container-2'背景颜色 – dippas

你的问题，是因为你的内联CSS设置height:50%到.box1内#box，其垂直（移动视图）将总结到200%因此覆盖.container-2，移动视图，设置到25%

body { 
 
    margin: 0; 
 
    width: 100%; 
 
} 
 
.container { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: rgb(152, 152, 152); 
 
} 
 
.container-2 { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: rgb(46, 6, 6); 
 
} 
 
.box-container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.box1 { 
 
    background-color: rgb(65, 186, 186); 
 
    width: 50%; 
 
    height: 100%; 
 
} 
 
.box2 { 
 
    background-color: rgb(92, 191, 124); 
 
    width: 50%; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
} 
 
#box .box1 { 
 
    height: 50% 
 
} 
 
#box .box1:nth-child(3n+1) { 
 
    background: blue 
 
} 
 
#box .box1:nth-child(n+2):nth-child(-n+3) { 
 
    background: red 
 
} 
 
@media (max-width: 600px) { 
 
    #box .box1 { 
 
    height: 25% 
 
    } 
 
    .box1 { 
 
    background-color: rgb(65, 186, 186); 
 
    width: 100%; 
 
    height: 50%; 
 
    } 
 
    .box2 { 
 
    background-color: rgb(92, 191, 124); 
 
    width: 100%; 
 
    height: 50%; 
 
    } 
 
}

<div class="container"> 
 
    <div class="box-container"> 
 
    <div class="box1"> 
 

 
    </div> 
 
    <div class="box2" id="box"> 
 
     <div class="box1"></div> 
 
     <div class="box1"></div> 
 
     <div class="box1"></div> 
 
     <div class="box1"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="container-2"> 
 
</div>

来源

2016-05-15 02:26:52 dippas

我希望box2中的方框在移动视图下以box1的方式折叠到他们已有的方式。我只是想做到这一点，所以container2仍然是box2中box的100％可见的beanth。 – sydluce

我刚刚在我的片段中做过不是吗？容器（与box1 + box2）然后container2，我的代码片段做到了这一点。 – dippas

是的，你确实抱歉，我试图在堆栈溢出测试代码，它没有正常工作，所以我把它放在实际的文件中，它的工作谢谢你！ – sydluce

如何让一个容器在移动视图中向下推动另一个容器？

回答

相关问题