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

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 >

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

</div>

I want a colum in the middle to extend to the bottom of the page whithout adding more page content or space where you dont 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 dont want.

Here is the picture because there is a lot of code in it, but i have poition relative, enter image description here but i want the end of the whit box with the checkbox to reach the bottom of the page

Thank You,

CodePudding user response：

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 >

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

</div>

CodePudding user response：

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 >

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

</div>