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

The use of a <button> element in a React App within a Web Component with Shadow DOM in Chrome disables the ability to highlight text

A guide on dynamically accessing an image from the src directory using props in a Vite + React application

Why Jquery's nth-child selection and conditional formatting are failing to work

Determine the number of rows in an Ajax-fed datatable (including paginated rows) that have a specific value in a

What exactly is the functionality of the jQuery.on() method?

Obtain the outcome of HTML5 FileReader by utilizing promises within an asynchronous function

Customizing Material-UI: A guide to overriding inner components

I am having trouble getting bootstrap-icons to work in my Angular project and I'm eager to figure it out

Is the Okta SDK compatible with all identity providers?

The execution of consecutive Ajax requests encounters issues in the Google Chrome and Safari browsers

Are there ways to incorporate extra icons into NavMenu in Blazor 8?

How can I ensure that the HTML I retrieve with $http in Angular is displayed as actual HTML and not just plain text?

Switchable radio options

Enumerate the variable values that are validated using jQuery

Incorporating AJAX and jQuery to dynamically update a numerical value

In PHP forms, ensure that only completed textboxes are submitted and empty textboxes are discarded

Building a contact form in Angular and sending emails with Nodemailer

The dictionary of parameters has an empty entry for the 'wantedids' parameter, which is of a non-nullable type 'System.Int32', in the 'System.Web.Mvc.JsonResult' method

Error: JSON at position 1 is throwing off the syntax in EXPRESS due to an unexpected token "

I am having trouble with Node.js not properly handling POST requests and instead throwing a 505 error