CSS高度溢出：100％？

Question

我在另一个div中有两个height: 100%;个框。但是当我制作内部框height: 100%;时，绿色<h2>正在移动红框。我该如何解决这个问题？

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

屏幕截图：http://imgur.com/YMI1vXS

Answer 1

只需删除float: left;

中的a-detay section {}即可

更新 DEMO （您的JSFiddle）

为什么在宽度为100％时想要使用 float ？

Answer 2

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

.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>

Answer 3

试试这个

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>

Answer 4

  .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;}