CODEWITHSUNDEEP
css
quantumbutterfly
quantumbutterfly

Reputation: 1955

Have div take up 1/6th of remaining parent div height

I am attempting to make a simple calendar using css.

I have a parent div that will contain the calendar, and I have a div within that that contains the header with "Monday", "Tuesday", etc and is of fixed height. I now want to add divs that represent the rows of the calendar and split the remaining space into six even rows. However, I can't figure out how to divide the REMAINING space into 6 parts. Everything I try makes the div 1/6th of the parent div.

Any tips would be appreciated.

HTML:

<div id="parent>
    <div id="header">
        ST
    </div>
    <div class="row">
        hi
    </div>
</div>

CSS:

.row{
    width:100%;
    height: 16.66%;
    background-color:red;
}

Upvotes: 0

Views: 64

Answers (2)

Oriol
Oriol

Reputation: 288130

When you want to distribute remaining space left by a flexible element, flexbox is the answer.

html, body, #parent {
  margin: 0;
  height: 100%;
}
#parent {
  display: flex;
  flex-direction: column;
}
#header {
  background-color: green;
}
.row {
  width: 100%;
  flex: 1; /* Distribute remaining space equally among the rows */
  background-color: red;
}
.row:nth-child(odd) {
  background-color: blue;
}
<div id="parent">
  <div id="header">Header</div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
</div>

Upvotes: 1

Asons
Asons

Reputation: 87191

There are several ways to do that, and to pick one I need to know more how it should be used.

This sample simply use CSS calc() and subtract 1/6 of the header from 1/6 of the parent.

html, body {
  margin: 0;
}
#parent {
  height: 100vh;
}
#header {
  height: 60px;
  background-color:green;
}
.row{
  height: calc(16.66% - 10px);
  background-color:red;
}
.row:nth-child(odd){
  background-color:blue;
}
<div id="parent">
    <div id="header">
        Header
    </div>
    <div class="row">
    </div>
    <div class="row">
    </div>
    <div class="row">
    </div>
    <div class="row">
    </div>
    <div class="row">
    </div>
    <div class="row">
    </div>
</div>

Upvotes: 0

Related Questions