我使用bootstrap网格创建了一个div结构,但是在调整窗口大小并使其非常小之后,背景颜色为div的div总是消失。
为什么会发生这种情况并且有办法阻止它吗?
播放: http://www.w3schools.com/code/tryit.asp?filename=F0JT60DW5CHG
.row-sm-3 {
height: 33.33%;
}
#wrap {
height: inherit;
background: red;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="col-sm-8 col-sm-offset-2" style="height:300px">
<div class="col-sm-6" style="color: white; background:black; height: inherit;">
<div style="height: 25%;"><!-- space top --></div>
<div style="height: 50%;">
<div style="background:red">
<h2 id="sps_einleitung_h2">LOREM IPSUM</h2>
</div>
<div id="sps_einleitung_head_kasten_2">
LOREM IPSUM
<br><br>
LOREM IPSUM
</div>
</div>
<div style="height: 25%;"><!-- space bottom --></div>
</div>
<div class="col-sm-6" id="wrap">
<div style="height: 33.33%;position: relative;">
<img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" style="width: 50px;position: absolute;">
</div>
<div style="height: 33.33%;position: relative;">
<img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" style="width: 50px;position: absolute;">
</div>
<div style="height: 33.33%;position: relative;">
<img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" style="width: 50px;position: absolute;">
</div>
</div>
</div>
<div class="col-sm-8 col-sm-offset-2" style="background-color:green; height:200px;">
<div class="row" style="height:inherit;">
<div class="col-sm-6" style="height:inherit; background-color:blue;">
<div class="row-sm-3 row">A</div>
<div class="row-sm-3 row">B</div>
<div class="row-sm-3 row">C</div>
</div>
<div class="col-sm-6" style="height:inherit; background-color:yellow;">
<div class="row-sm-3 row">D</div>
<div class="row-sm-3 row">E</div>
<div class="row-sm-3 row">F</div>
</div>
</div>
</div>
红色div总是处于蓝色div之下,为什么会发生这种情况,我该如何解决呢?
答案 0 :(得分:2)
想象一下,你有一瓶水,可以有1升,但你想用2升装满它。
你不能拥有一个高度为300px的父div,并且有2个孩子,其中也有300px。降低两个孩子的身高或增加父元素的高度。
我希望这对你有所帮助。
详细了解height。
答案 1 :(得分:1)
您已将固定高度添加到第一行,以便在从第一行调整窗口第二列时隐藏在第二行下面。将固定高度添加到第一行的两个单独列。
replace
<div class="col-sm-8 col-sm-offset-2" style="height:300px">
with
<div class="col-sm-8 col-sm-offset-2">
and
<div class="col-sm-6" style="color: white; background:black; height: inherit;">
with
<div class="col-sm-6" style="color: white; background:black; height: 300px;">
答案 2 :(得分:0)
您是否尝试过更改z-index? 前 #wrap { 身高:继承; 背景:红色; 的z-index:10000; }“
答案 3 :(得分:0)
使用CSS的“ clear:both”属性