CODEWITHSUNDEEP
htmlcss
anivas
anivas

Reputation: 6567

Two divs - one fixed height, the other to fill the remaining space

I have two div: one with static height and the other to fill the rest of the space of the parent. The parent div gets dynamic height. In the example I have set it to 100px, but it can be 200px or 300px. The green section spills over the blue parent section. I have added margin just to show the spill. I want it to fill only until the parent bounds and don't want any scroll bar. I am not sure how to get rid of this 15px going out of the parents bounds. Appreciate any help here.

.container {
  width: 100%;
  height: 100px;
  background: blue;
  position: relative;
}

.child1 {
  position: absolute;
  top: 0;
  height: 15px;
  width: 100%;
  background: red;
}

.child2 {
  position: absolute;
  top: 15px;
  height: 100%;
  width: 100%;
  margin-left: 5px;
  background: green;
}
<div class="container">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

enter image description here

Upvotes: 2

Views: 5846

Answers (5)

ashish singh
ashish singh

Reputation: 6914

please use flexbox

.p {
  display: flex;
  flex-direction: column;
  min-height: 150px;
  border: 1px solid red;
}

.c {
  height: 15px;
  background-color: yellow;
}

.d {
  flex-grow: 1;
  background-color: green;
}
<div class='p'>
    <div class=c></div>
    <div class=d>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error officia, perferendis sed ipsam quae illo voluptas voluptate, obcaecati pariatuLorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>

Upvotes: 7

user3127648
user3127648

Reputation: 1377

Hope this helps

.container {
  width: 100%;
  height: 100px;
  background: blue;
  position: relative;
}

.child1 {
  position: absolute;
  top: 0;
  height: 15px;
  width: 100%;
  background: red;
}

.child2 {
  position: static; //browser default position is static no need
  top: 15px;
  height: 100%;
  width: 100%;
  margin-left: 5px;
  background: green;
}
<div class="container">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

Upvotes: 0

Johannes
Johannes

Reputation: 67799

define child2's height and width as follows:

height: calc(100% - 15px);
width: calc(100% - 5px);


.container {
  width: 100%;
  height: 100px;
  background: blue;
  position: relative;
}

.child1 {
  position: absolute;
  top: 0;
  height: 15px;
  width: 100%;
  background: red;
}

.child2 {
  position: absolute;
  top: 15px;
  height: calc(100% - 15px);
  width: calc(100% - 5px);
  margin-left: 5px;
  background: green;
}
<div class="container">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

Upvotes: 4

Hackerman
Hackerman

Reputation: 153

Not sure if I'm getting right your problem, but here goes my try:

<div style="width: 100%; height: 100px; background: blue; position: relative; overflow:hidden">
    <div style="position: absolute; top: 0px; height: 15px; width: 100%; background: red"></div>
    <div style="position: absolute; top: 15px; height: 100%; width: 100%; margin-left: 5px;background: green"></div>
</div>

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

You can use top/left/right/bottom values to make the box fill the parent instead of using width: 100%; height: 100%; margin-left: 5px

<div style="width: 100%; height: 100px; background: blue; position: relative;">
  <div style="position: absolute; top: 0px; height: 15px; width: 100%; background: red"></div>
  <div style="position: absolute; top: 15px; bottom: 0; left: 5px; right: 0; background: green"></div>
</div>

Upvotes: 0

Related Questions