0

#external
{
  background-color: #585858;
  width: 200px;
  height: 200px;
}
#internal
{
  background-color: #111858;
  width: 50px;
  height: 100%;
}
<div id="external">
  content 1
  <div id="internal"></div>
</div>

In this case, how can I set a remnant height of external div to the internal div? The problem is when I set 100% height to internal div, so internal height == external height.

Sevi
  • 863
  • 4
  • 15
  • 33
  • 1
    Add content in content div(new div for content), that will solve the issue. – MarmiK Aug 19 '15 at 12:18
  • Consider visiting this question: [Make a div fill the height of the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) – Vibhor Dube Aug 19 '15 at 12:27

2 Answers2

1

Your request is a little unclear but flexbox can do what I think you are after.

p {
  margin: 0;
}
.external {
  background-color: rgba(255, 0, 0, 0.5);
  width: 200px;
  height: 200px;
  display: inline-flex;
  flex-direction: column;
  margin: 10px;
}
.internal {
  background-color: #111858;
  100%;
  flex: 1;
}
<div class="external">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <div class="internal"></div>
</div>
<div class="external">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum quia tempore! Sit, laboriosam, quam.</p>
  <div class="internal"></div>
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
0

use this may help u

<style>
    #external
    {
      background-color: #585858;
      width: 200px;
      height: 200px;
    }
    #internal
    {
      background-color: #111858;
      width: 50px;
      height: calc(100% - 20px);
    }
    .content
    {
    height:20px;
    }
</style>

<div id="external">
  <div class="content">content 1</div>
  <div id="internal"></div>
</div>
Anubhav pun
  • 1,323
  • 2
  • 8
  • 20