CODEWITHSUNDEEP
css
Gulhan
Gulhan

Reputation: 77

Overflow with CSS height:100%?

I have two height: 100%; boxes inside another div. But when I make the inside box height: 100%;, the green <h2> is moving over the red box. How can I solve this problem?

code: http://jsfiddle.net/ajnglagla/9yL7c946/

screenshot: https://i.sstatic.net/cqmQg.jpg

Upvotes: 0

Views: 156

Answers (4)

Darshak Shekhda
Darshak Shekhda

Reputation: 646

i have best solution. try this 

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

Upvotes: 1

DracSkywalker
DracSkywalker

Reputation: 364

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

modify the css rule like this. this will work i think.. but i don't know the method is correct or not

or this

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

Upvotes: 0

Darshak Shekhda
Darshak Shekhda

Reputation: 646

try this 

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>

Upvotes: 0

Carl0s1z
Carl0s1z

Reputation: 4723

Just delete float: left; in a-detay section {}

Updated DEMO (Your JSFiddle)

Why do you want to use float when you have 100% width?

Upvotes: 1

Related Questions