css - CSS 高度溢出 :100%?

Question

我有两个 height: 100%;另一个分区内的框。但是当我制作内盒时 height: 100%; , 绿色 <h2>正在移动到红色框上方。我该如何解决这个问题？

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

截图:http://imgur.com/YMI1vXS

Answer 1

我有最佳解决方案。尝试这个

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