Create a div element that expands to occupy the remaining space of the screen's height

Question

Create a div element that expands to occupy the remaining space of the screen's height

I am trying to adjust the min-height of content2 to be equal to the screen height minus the height of other divs.

In the current HTML/CSS setup provided below, the resulting outcome exceeds the screen height. How can I achieve my desired effect? The footer (copyright section) is nested within content2, hence I need the height of content2 to match that of the screen exactly.


                body {
                    margin:0;
                    border:0;
                    background-color:#24373B;
                    color: #fff;
                }

                #headerBG {
                    min-width:980px;
                    background-color:#000;
                }

                #header {
                    width:980px;
                }

                #content1 {
                    width:980px;
                }

                #content2 {
                    width:960px;
                    padding:10px;
                    margin-top:30px;
                    background-color:#355258;
                    min-height:100hv; /* Issue may lie here */
                }

<body>
                  <div id="headerBG">
                      <div id="header">header</div>
                  </div>
                  
                  <div id="content1">content1</div>
                  <div id="content2">content2</div>
               </body>

javascript html css

Answer 1

Answer №1

Don't forget to use 100vh instead of 100hv as the minimum height. Here's the corrected code:

#content2{
    width:960px;
    padding:10px;
    margin-top:30px;
    background-color:#355258;
    min-height: calc(100vh - 50px);
}

Prior to using vw or vh units, make sure to define them in your CSS:

html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
}

Answer 2

Don't forget to use 100vh instead of 100hv as the minimum height. Here's the corrected code:

#content2{
    width:960px;
    padding:10px;
    margin-top:30px;
    background-color:#355258;
    min-height: calc(100vh - 50px);
}

Prior to using vw or vh units, make sure to define them in your CSS:

html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
}

Answer 3

Answer №2

Using CSS table layout instead of viewport units like (vw, vh) can help achieve the desired effect. By setting up a table structure, you can make the height of the pink area expand to fill out all the available space automatically.

Check out this example on jsfiddle: http://jsfiddle.net/qtu89zhm/

html, body {
    height: 100%;
    margin: 0;
}
.table {
    display: table;
    width: 100%;
    height: 100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}
.box {
    width: 500px;
    margin: 0 auto;
}
.content-2 .cell, .content-2 .box {
    height: 100%;
}
.header .cell {
    background: gray;
}
.header .box {
    background: teal;
}
.content-1 .box {
    background: gold;
}
.content-2 .box {
    background: pink;
}

<div class="table">
    <div class="row header">
        <div class="cell">
            <div class="box">header</div>
        </div>
    </div>
    <div class="row content-1">
        <div class="cell">
            <div class="box">content1</div>
        </div>
    </div>
    <div class="row content-2">
        <div class="cell">
            <div class="box">content2</div>
        </div>
    </div>
</div>

Answer 4

Using CSS table layout instead of viewport units like (vw, vh) can help achieve the desired effect. By setting up a table structure, you can make the height of the pink area expand to fill out all the available space automatically.

Check out this example on jsfiddle: http://jsfiddle.net/qtu89zhm/

html, body {
    height: 100%;
    margin: 0;
}
.table {
    display: table;
    width: 100%;
    height: 100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}
.box {
    width: 500px;
    margin: 0 auto;
}
.content-2 .cell, .content-2 .box {
    height: 100%;
}
.header .cell {
    background: gray;
}
.header .box {
    background: teal;
}
.content-1 .box {
    background: gold;
}
.content-2 .box {
    background: pink;
}

<div class="table">
    <div class="row header">
        <div class="cell">
            <div class="box">header</div>
        </div>
    </div>
    <div class="row content-1">
        <div class="cell">
            <div class="box">content1</div>
        </div>
    </div>
    <div class="row content-2">
        <div class="cell">
            <div class="box">content2</div>
        </div>
    </div>
</div>

Answer 5

Answer №3

If I've grasped your question correctly...

body{
margin:0;
border:0;
background-color:#555555;
  height:100vh;
  width:100vw;
}
#headerBG{
min-width:980px;
background-color:#AAAAAA;
  height:10%;
}
#header{
width:980px;
  height:100%;
  width:10%;
    
background-color:#FFF;
}
#content1{
width:980px;
  height:40%;
background-color:#000000;
  margin-left:5%;
  width:90%;
}
#content2{
margin-top:30px;
background-color:#FFFFFF;
  margin-left:5%;
  width:90%;
  height:50%;
}

<body>
<div id="headerBG">
    <div id="header">
    </div>
</div>
<div id="content1">
</div>
<div id="content2">
</div>
</body>

Answer 6

If I've grasped your question correctly...

body{
margin:0;
border:0;
background-color:#555555;
  height:100vh;
  width:100vw;
}
#headerBG{
min-width:980px;
background-color:#AAAAAA;
  height:10%;
}
#header{
width:980px;
  height:100%;
  width:10%;
    
background-color:#FFF;
}
#content1{
width:980px;
  height:40%;
background-color:#000000;
  margin-left:5%;
  width:90%;
}
#content2{
margin-top:30px;
background-color:#FFFFFF;
  margin-left:5%;
  width:90%;
  height:50%;
}

<body>
<div id="headerBG">
    <div id="header">
    </div>
</div>
<div id="content1">
</div>
<div id="content2">
</div>
</body>

Create a div element that expands to occupy the remaining space of the screen's height

Answer №1

Answer №2

Answer №3

Similar questions

Create an array of objects in JavaScript using JSON data

What is the process for including a new item in a JavaScript dictionary?

What is the proper way to include jQuery script in HTML document?

Show the chosen choice in a select dropdown with custom text using Angular

What is the best way to retrieve an object from the state in my React application?

Displaying the outcome of an HTML form submission on the current page

Tips for displaying an mp4 video using an HTML video tag when the video is uploaded through Multer

The importance of context visibility for functions in JavaScript within a React.js environment

Trouble with AJAX communicating with PHP and not rendering fresh data

Updating state in React with a nested promise within the useEffect hook

Deciphering the evolution of APIs and managing internal API systems

Is there a way I can obtain the code for a message box?

What is the best way to attach to the beforeSubmit event of a dynamically loaded AJAX form in Yii?

Strengthening JavaScript Security

Determine the variable height of a div containing dynamic content in order to execute a transform

What is the best way to showcase my products in a horizontal line? I am seeking a solution using PHP and Bootstrap to exhibit all the items retrieved

What steps should be taken to trigger an API call once 3 characters have been entered into a field

What is the best way to access an Ajax response outside of its function using JQuery?

Dividing JSON File Entries Among Several Files

Tips for keeping a reading item in place while scrolling