Creating an HTML div that fills the remaining height available

Question

Creating an HTML div that fills the remaining height available

Currently, I'm developing a web application and aiming to have the content span the full height of the screen. Is there a way to make the div element (other-child) automatically fill its parent without having to manually set its height?

html {
height:100%;
}

body{
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
 }

#parent {
height:100%;
}

#child {
height:50px;
background:yellow;
}

#other-child{
background:red;
/* height: 100% */
}

<html>
<body>
  <div id="parent">
    <div id="child" >fixed height</div>
    <div id="other-child">occupy the rest</div>
  </div>
</body>
</html>

html css

Answer 1

Answer №1

If you utilize css grid on the element with the id of #parent, you can easily manage all the layout from there. It can be as straightforward as the following:

html {
height:100%;
}

body{
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
 }

#parent {
 min-height: 100vh;
 display:grid;
 grid-template-rows: 50px 1fr
}

#child {

background:yellow;
}

#other-child{
background:red;
 
}

<html>
<body>
  <div id="parent">
    <div id="child" >fixed height</div>
    <div id="other-child">occupy the rest</div>
  </div>
</body>
</html>

Answer 2

If you utilize css grid on the element with the id of #parent, you can easily manage all the layout from there. It can be as straightforward as the following:

html {
height:100%;
}

body{
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
 }

#parent {
 min-height: 100vh;
 display:grid;
 grid-template-rows: 50px 1fr
}

#child {

background:yellow;
}

#other-child{
background:red;
 
}

<html>
<body>
  <div id="parent">
    <div id="child" >fixed height</div>
    <div id="other-child">occupy the rest</div>
  </div>
</body>
</html>

Answer 3

Answer №2

Kindly explore this solution: set the parent element to display:flex and enable the child element to grow using flex-grow: 1

html {
height:100%;
}

body{
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
 }

#parent {
height:100%;
width:100%;
display: flex;
flex-grow: 1;
flex-direction: column;
}

#child {
height:50px;
background:yellow;
}

#other-child{
background:red;
flex-grow: 1;
/* height: 100% */
}

<html>
<body>
  <div id="parent">
    <div id="child" >fixed height</div>
    <div id="other-child">occupy the rest</div>
  </div>
</body>
</html>

Answer 4

Kindly explore this solution: set the parent element to display:flex and enable the child element to grow using flex-grow: 1

html {
height:100%;
}

body{
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
 }

#parent {
height:100%;
width:100%;
display: flex;
flex-grow: 1;
flex-direction: column;
}

#child {
height:50px;
background:yellow;
}

#other-child{
background:red;
flex-grow: 1;
/* height: 100% */
}

<html>
<body>
  <div id="parent">
    <div id="child" >fixed height</div>
    <div id="other-child">occupy the rest</div>
  </div>
</body>
</html>

Answer 5

Answer №3

Here is a suggestion...

html,
body {
  height: 100%;
  margin: 0;
}

#parent {
  display: flex;
  flex-flow: column;
  height: 100%;
}

#child {
  flex: 0 1 auto;
  background: red;
}

#other-child {
  flex: 1 1 auto;
  background: yellow;
}

<div id="parent">
    <div id="child" >fixed height</div>
    <div id="other-child">occupy the rest</div>
  </div>

Answer 6

Here is a suggestion...

html,
body {
  height: 100%;
  margin: 0;
}

#parent {
  display: flex;
  flex-flow: column;
  height: 100%;
}

#child {
  flex: 0 1 auto;
  background: red;
}

#other-child {
  flex: 1 1 auto;
  background: yellow;
}

<div id="parent">
    <div id="child" >fixed height</div>
    <div id="other-child">occupy the rest</div>
  </div>

Creating an HTML div that fills the remaining height available

Answer №1

Answer №2

Answer №3

Similar questions

How to disable the click handler of a div using only classes

Ways to subtly adjust the edges of text in a design

Is there a way to ensure that functions operate effectively within a modal window?

Tips for accessing a DOM element's ::before content using JavaScript

Is it possible to store values in LocalStorage by clicking?

Tips for capturing text input from a Quill rich text editor div

Reverting Changes Made with JQuery Append

What could be causing my AngularJS to malfunction on this particular website?

What is the best way to include two rows in a single INSERT statement?

Preserving the most recent choice made in a dropdown menu

Selenium Webdriver is having trouble locating an element within an xblock

The URL requested exceeds the maximum length limit in asp.net, causing a 414 error

The jQuery Bootstrap extension functions correctly on Firefox, but encounters compatibility issues on IE10

Styling for Print Media: Adjusting the horizontal spacing between inline elements

Setting up a static directory in Node Express to serve index.html along with additional tsv files

Tips on redirecting the user to the page they have selected

Retrieve the Span class value contained within a Select Option

Javascript continues to execute even after the designated element has been eliminated or substituted

Determining the size of an object in ASP.net as a percentage of the page, while taking into account the size of

Optimizing table cell width in ASP.NET based on longest text content