How to make a container extend to the bottom without adding more length

Question

body {
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@1,300&display=swap');

background: linear-gradient(to right, yellow, black);

}
.middle-checklist-box-social {
    position: relative;
    top: 0;
    margin: 0 auto;
    height: 35%;
    width: 50%;
    background-color: white;
    padding: 10px 10px 10px 10px;
    bottom: 0%;
}

.checkbox-label-class {
    font-size: 20px;
    font-family: 'Roboto Mono', monospace;
    vertical-align: text-bottom;
}

.giannisCheckbox {
    height: 18px; 
    width: 18px;
}

.chkbxLowerLine {
    position: initial;
    height: 2px;
    width: 90%;
    background-color: grey;
    margin-top: 5px;
    margin-bottom: 5px;
}

<div class="middle-checklist-box-social">

    <div class="middle-checklist-box-social">
        <label class="container" > 
            <input id="chkbx001" class="giannisCheckbox" type="checkbox" >
            <span class="checkbox-label-class">Social Studies Unit 8 Review (Graded)</span>
        </label>
        <!-- Put in a grey line that seperates the checkbox from the others  -->
        <p class="chkbxLowerLine"></p>
        <!-- New Checkbox here under the line  -->
        <label class="container" > 
            <input id="chkbx002" class="giannisCheckbox" type="checkbox">
            <span class="checkbox-label-class">Georgia 3.2.1. GO Project</span>
        </label>
    
    
    
    
    
    
    
    
    </div>

</div>

I want a column in the middle to extend to the bottom of the page. without adding more page content or space where you don't have to scroll to the bottom. I looked around for clues or if anyone has solved this, but of no luck.

I have tried 100vh, but it adds more content making me scroll down which I don't want.

Here is the picture because there is a lot of code in it, but I have position relative,

But I want the end of the white box with the checkbox to reach the bottom of the page

Answer 1

You using 2 times the same wrapper class for this box .middle-checklist-box-social, setting it to 100vh + the paddings included will extend it. Browsers by default also include margin, which you can change by setting a value or simply setting it to zero.

If you are applying dimensions to an element and want to make sure they don't exceed this width/height because of added padding, you can set the box model of that element to box-sizing: border-box; or set it globally like this: *, *::before, *::after {box-sizing: border-box;}

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@1,300&display=swap');

*, *::before, *::after {box-sizing: border-box;}

body {
  background: linear-gradient(to right, yellow, black);
  padding: 1rem;
  margin: 0;
}


.middle-checklist-box-social {
    position: relative;
    top: 0;
    margin: 0 auto;
    height: calc(100vh - 2rem);
    width: 50%;
    background-color: white;
    padding: 10px 10px 10px 10px;
    bottom: 0%;
}

.checkbox-label-class {
    font-size: 20px;
    font-family: 'Roboto Mono', monospace;
    vertical-align: text-bottom;
}

.giannisCheckbox {
    height: 18px; 
    width: 18px;
}

.chkbxLowerLine {
    position: initial;
    height: 2px;
    width: 90%;
    background-color: grey;
    margin-top: 5px;
    margin-bottom: 5px;
}

<div class="middle-checklist-box-social">

    <label class="container" > 
        <input id="chkbx001" class="giannisCheckbox" type="checkbox" >
        <span class="checkbox-label-class">Social Studies Unit 8 Review (Graded)</span>
    </label>
    <!-- Put in a grey line that seperates the checkbox from the others  -->
    <p class="chkbxLowerLine"></p>
    <!-- New Checkbox here under the line  -->
    <label class="container" > 
        <input id="chkbx002" class="giannisCheckbox" type="checkbox">
        <span class="checkbox-label-class">Georgia 3.2.1. GO Project</span>
    </label>

</div>

Answer 2

You should set height: 100% to body and html also margin: 0 to body for fit that:

body {
  @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@1,300&display=swap');
  background: linear-gradient(to right, yellow, black);
  margin: 0;
  height: 100%;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

.middle-checklist-box-social1 {
  margin: 0 auto;
  height: 100%;
  width: 50%;
  background-color: white;
  padding: 10px;
  border: solid;
}

.middle-checklist-box-social2 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.checkbox-label-class {
  font-size: 20px;
  font-family: 'Roboto Mono', monospace;
  vertical-align: text-bottom;
}

.giannisCheckbox {
  height: 18px;
  width: 18px;
}

.chkbxLowerLine {
  position: initial;
  height: 2px;
  width: 90%;
  background-color: grey;
  margin-top: 5px;
  margin-bottom: 5px;
}

<div class="middle-checklist-box-social1">

  <div class="middle-checklist-box-social2">
    <label class="container"> 
            <input id="chkbx001" class="giannisCheckbox" type="checkbox" >
            <span class="checkbox-label-class">Social Studies Unit 8 Review (Graded)</span>
        </label>
    <!-- Put in a grey line that seperates the checkbox from the others  -->
    <p class="chkbxLowerLine"></p>
    <!-- New Checkbox here under the line  -->
    <label class="container"> 
            <input id="chkbx002" class="giannisCheckbox" type="checkbox">
            <span class="checkbox-label-class">Georgia 3.2.1. GO Project</span>
        </label>
  </div>

</div>

Answer 3

You should have the container's container be 100vh with display flex, and then let flexbox take care of your heights.

Example :

.container{
    display: flex;
    flex-direction: column;
}

.notExtendingChild{
    /* whatever */
}

.extendingChild{
    flex-grow: 1
}