CSS高度溢出:100%

我在另一个div中有两个height: 100%;框。但当我将内侧框设为height: 100%;时，绿色的<h2>正在红色框上方移动。我该如何解决这个问题？

代码：http://jsfiddle.net/ajnglagla/9yL7c946/

屏幕截图：https://i.stack.imgur.com/cqmQg.jpg

我有最好的解决方案。试试这个

.a-detay section {
  margin: 0 0 30px 0;
}
.a-detay section h2 {
  font-size: 190%;
  font-weight: normal;
  line-height: 1.15em;
  margin: 10px 0;
}
.a-detay section .k-konteyner {
  position: relative;
}
.a-detay section .k-konteyner .alanozet {
  padding: 10px;
  width: 134px;
  height: 100%;
  position: absolute;
  right: 0px;
  box-sizing: border-box;
  top: 0;
}
.a-detay section .k-konteyner .detay {
  padding: 30px;
  width: 100px;
}
.a-detay #guvenlik .k-konteyner {
  border: 5px solid #f7464a;
}
.a-detay #guvenlik .k-konteyner .alanozet {
  background-color: #f7464a;
}
.a-detay #guvenlik h2 {
  color: #f7464a;
}
.a-detay #saglik .k-konteyner {
  border: 5px solid #4eb055;
}
.a-detay #saglik .k-konteyner .alanozet {
  background-color: #4eb055;
}
.a-detay #saglik h2 {
  color: #4eb055;
}

<section class="a-detay">
  <section id="guvenlik" class="konu">
    <h2>Red</h2>
    <div class="k-konteyner">
      <div class="detay">
        Left
        <br>Left
        <br>Left
        <br>Left
        <br>Left
        <br>Left
      </div>
      <div class="alanozet">When i make this area height 100%, Green H2 is being over the RED box.</div>
    </div>
  </section>
  <section id="saglik" class="konu">
    <h2>Green</h2>
    <div class="k-konteyner">
      <div class="detay">
        Left
        <br>Left
        <br>Left
        <br>Left
        <br>Left
        <br>Left
      </div>
      <div class="alanozet">When i make this area height 100%, Green H2 is being over the RED box.</div>
    </div>
  </section>
</section>

只需删除a-detay section {} 中的float: left;

更新DEMO（您的JSFiddle）

当宽度为100%时，为什么要使用float？

试试这个

html,
body {
  height: 100%;
}
.a-detay {
  float: left;
  width: 100%;
  height: 100%;
}
.a-detay section {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0 0 30px 0;
}
.a-detay section h2 {
  font-size: 190%;
  font-weight: normal;
  line-height: 1.15em;
  margin: 10px 0;
}
.a-detay section .k-konteyner {
  float: left;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.a-detay section .k-konteyner .alanozet {
  float: right;
  padding: 0 0 20px 0;
  width: 134px;
  height: 100%;
  box-sizing: border-box;
}
.a-detay section .k-konteyner .detay {
  float: left;
  padding: 30px;
  width: 200px;
}
.a-detay #guvenlik .k-konteyner {
  border: 5px solid #f7464a;
}
.a-detay #guvenlik .k-konteyner .alanozet {
  background-color: #f7464a;
}
.a-detay #guvenlik h2 {
  color: #f7464a;
}
.a-detay #saglik .k-konteyner {
  border: 5px solid #4eb055;
}
.a-detay #saglik .k-konteyner .alanozet {
  background-color: #4eb055;
}
.a-detay #saglik h2 {
  color: #4eb055;
}

<section class="a-detay">
  <section id="guvenlik" class="konu">
    <h2>Red</h2>
    <div class="k-konteyner">
      <div class="detay">
        Left
        <br>Left
        <br>Left
        <br>Left
        <br>Left
        <br>Left
      </div>
      <div class="alanozet">
        When i make this area height 100%, Green H2 is being over the RED box.
      </div>
    </div>
  </section>
  <section id="saglik" class="konu">
    <h2>Green</h2>
    <div class="k-konteyner">
      <div class="detay">
        Left
        <br>Left
        <br>Left
        <br>Left
        <br>Left
        <br>Left
      </div>
      <div class="alanozet">
        When i make this area height 100%, Green H2 is being over the RED box.
      </div>
    </div>
  </section>
</section>

  .a-detay #saglik h2 {margin-top:30px;color:#4eb055;}

像这样修改css规则。我认为这会奏效的。。但是我不知道的方法是否正确

或者这个

    .a-detay section { float:left; width:100%; height:100%; box-sizing: border-box; margin:30px 0px 30px 0;}

相关内容

最新更新

热门标签：