Extend the height of a div to reach the beginning of the following div

Question

Extend the height of a div to reach the beginning of the following div

I'm attempting to make my main content and menu divs extend up to the bottom of the footer div. Here's my HTML:

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#wrapper {
  min-height: 100%;
  position: relative;
}
#header {
  padding: 10px;
  background: #3095C7;
}
#main {
  padding-bottom: 80px;
  bull
}
#content {
  padding-left: 310px;
  background: #FFEFC4;
}
#menu {
  background: #67b5d1;
  width: 300px;
  position: absolute;
  float: left;
}
#footer {
  text-align: center;
  padding: 30px 0;
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #3095C7;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="main">
    <div id="menu">
      menu here
    </div>
    <div id="content">
      content here
    </div>
  </div>
  <div id="footer">footer content</div>
</div>

I've set the main, content, and menu heights to 100%, but they only reach the very bottom of the wrapper div, extending beyond the footer. What I want is for the menu and content to span from the header down to the top of the footer, filling the entire page. I've experimented with using vh units, but it isn't always accurate when resizing the window.

Are there any tricks to ensure the divs fill all available space without overlapping the footer?

html css

Answer 1

Answer №1

Utilizing flexbox for a straightforward layout (compatible with browsers IE10+ and most modern browsers)

To begin, configure #wrapper with
```
display: flex; flex-flow: column nowrap
```
Next, set up #main with flex: 1 1 auto and apply display: flex to ensure it expands to the required height and allows its children to grow proportionally.
Apply flex: 0 1 300px to #menu (while eliminating floats/position: absolute) and set #content to flex: 1 1 auto.

UPDATE Don't forget to remove position: absolute (as well as associated bottom/left rules) from the footer. Additionally, add more content and adjust the left menu to prevent collapsing by changing flex: 0 0 300px instead of flex: 0 1 300px.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#wrapper {
  min-height: 100%;
  display:flex;
  flex-flow: column nowrap
}
#header {
  padding: 10px;
  background: #3095C7;
}
#main {
  display: flex;
  flex: 1 1 auto;
}
#content {
  flex: 1 1 auto;
  background: #FFEFC4;
}
#menu {
  background: #67b5d1;
  flex: 0 0 300px;
}
#footer {
  text-align: center;
  padding: 30px 0;
  width: 100%;
  height: 50px;
  background: #3095C7;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="main">
    <div id="menu">
      menu here
    </div>
    <div id="content">
      [Lots of lorem ipsum content]
    </div>
  </div>
  <div id="footer">footer content</div>
</div>

Answer 2

Utilizing flexbox for a straightforward layout (compatible with browsers IE10+ and most modern browsers)

To begin, configure #wrapper with
```
display: flex; flex-flow: column nowrap
```
Next, set up #main with flex: 1 1 auto and apply display: flex to ensure it expands to the required height and allows its children to grow proportionally.
Apply flex: 0 1 300px to #menu (while eliminating floats/position: absolute) and set #content to flex: 1 1 auto.

UPDATE Don't forget to remove position: absolute (as well as associated bottom/left rules) from the footer. Additionally, add more content and adjust the left menu to prevent collapsing by changing flex: 0 0 300px instead of flex: 0 1 300px.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#wrapper {
  min-height: 100%;
  display:flex;
  flex-flow: column nowrap
}
#header {
  padding: 10px;
  background: #3095C7;
}
#main {
  display: flex;
  flex: 1 1 auto;
}
#content {
  flex: 1 1 auto;
  background: #FFEFC4;
}
#menu {
  background: #67b5d1;
  flex: 0 0 300px;
}
#footer {
  text-align: center;
  padding: 30px 0;
  width: 100%;
  height: 50px;
  background: #3095C7;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="main">
    <div id="menu">
      menu here
    </div>
    <div id="content">
      [Lots of lorem ipsum content]
    </div>
  </div>
  <div id="footer">footer content</div>
</div>

Answer 3

Answer №2

Your code seems to be a little messy.

If I understand correctly, you have a header and footer with fixed heights, and you want the content of your website to fill the height of the vertical window.

When using height:100%, keep in mind that all parent elements need to also have the same height set to 100%. However, this may cause an issue as the total height might exceed the viewport height and create a scroll bar.

You can utilize the CSS calc function to subtract pixels from the 100% height. In your case, I calculated the pixels you need to subtract, and the height for your content should be:

height: calc(100% - 110px);

And the height of your main container should be:

height: calc(100% - 20px);

You will need to make several changes to your CSS to achieve the desired layout. Please review my suggestion here: FIDDLE

(I have also used calc to set the width of your content since your menu has a fixed width)

One important note: if you are not using border-box for your containers, be cautious when applying this technique. Padding values will add to the width (or height) of your elements. It is recommended to include the following rule in your CSS:

* {
    box-sizing: border-box;
}

Once you get accustomed to this practice, your development process will become smoother. This is just my modest opinion; others may have differing viewpoints.

Answer 4

Your code seems to be a little messy.

If I understand correctly, you have a header and footer with fixed heights, and you want the content of your website to fill the height of the vertical window.

When using height:100%, keep in mind that all parent elements need to also have the same height set to 100%. However, this may cause an issue as the total height might exceed the viewport height and create a scroll bar.

You can utilize the CSS calc function to subtract pixels from the 100% height. In your case, I calculated the pixels you need to subtract, and the height for your content should be:

height: calc(100% - 110px);

And the height of your main container should be:

height: calc(100% - 20px);

You will need to make several changes to your CSS to achieve the desired layout. Please review my suggestion here: FIDDLE

(I have also used calc to set the width of your content since your menu has a fixed width)

One important note: if you are not using border-box for your containers, be cautious when applying this technique. Padding values will add to the width (or height) of your elements. It is recommended to include the following rule in your CSS:

* {
    box-sizing: border-box;
}

Once you get accustomed to this practice, your development process will become smoother. This is just my modest opinion; others may have differing viewpoints.

Answer 5

Answer №3

By assuming that the footer has a fixed height, you can easily set the height of #menu and #content using the CSS property position: absolute:

position: absolute;
top: 0;
bottom: 110px; /* #footer height */

In most cases, absolutely positioned elements have auto values for height and width which adjust according to the content within the element. However, non-replaced absolutely positioned elements can be stretched to fill the available space by specifying specific values (rather than auto) for both top and bottom while leaving height unspecified (i.e., auto). The same applies to left, right, and width.

For more information, refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/position#Notes

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#wrapper {
  min-height: 100%;
  position: relative;
}
#header {
  padding: 10px;
  background: #3095C7;
}
#main {
  position: absolute;
  top: 20px;
  bottom: 0;
  width: 100%;
}
#content {
  position: absolute;
  left: 310px;
  right: 0;
  top: 0;
  bottom: 50px;
  background: #FFEFC4;
}
#menu {
  background: #67b5d1;
  top: 0;
  bottom: 50px;
  width: 300px;
  position: absolute;
}
#footer {
  text-align: center;
  padding: 30px 0;
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #3095C7;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="main">
    <div id="menu">
      menu here
    </div>
    <div id="content">
      content here
    </div>
  </div>
  <div id="footer">footer content</div>
</div>

Answer 6

By assuming that the footer has a fixed height, you can easily set the height of #menu and #content using the CSS property position: absolute:

position: absolute;
top: 0;
bottom: 110px; /* #footer height */

In most cases, absolutely positioned elements have auto values for height and width which adjust according to the content within the element. However, non-replaced absolutely positioned elements can be stretched to fill the available space by specifying specific values (rather than auto) for both top and bottom while leaving height unspecified (i.e., auto). The same applies to left, right, and width.

For more information, refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/position#Notes

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#wrapper {
  min-height: 100%;
  position: relative;
}
#header {
  padding: 10px;
  background: #3095C7;
}
#main {
  position: absolute;
  top: 20px;
  bottom: 0;
  width: 100%;
}
#content {
  position: absolute;
  left: 310px;
  right: 0;
  top: 0;
  bottom: 50px;
  background: #FFEFC4;
}
#menu {
  background: #67b5d1;
  top: 0;
  bottom: 50px;
  width: 300px;
  position: absolute;
}
#footer {
  text-align: center;
  padding: 30px 0;
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #3095C7;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="main">
    <div id="menu">
      menu here
    </div>
    <div id="content">
      content here
    </div>
  </div>
  <div id="footer">footer content</div>
</div>

Answer 7

Answer №4

To incorporate a set height in your CSS, for instance, height: 100px, and then define overflow as hidden.

In essence, simply include:

height: 100px;
overflow: hidden;

in both your menu and content sections.

Answer 8

To incorporate a set height in your CSS, for instance, height: 100px, and then define overflow as hidden.

In essence, simply include:

height: 100px;
overflow: hidden;

in both your menu and content sections.

Extend the height of a div to reach the beginning of the following div

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Renew the Look of Dynamic HTML with Updated Styles

How can I utilize CSS shapes to create clickable images?

Element is not being overlapped by higher z-index

Should I create CSS rules for different screen sizes or should I dynamically render components based on the screen size?

Transforming the style of a particular element within React using Array().fill().map's method

Create a script that ensures my website can be set as the homepage on any internet browser

Chosen link fails to update color

Can Link Tags be Used outside the <li> Tag in WordPress Widgets?

Arranging 2 Divs next to each other and optimizing CSS code for efficiency

What's the best way to format text as bold in a .ts file so that it appears as [innerText] in the HTML section?

Having Trouble with Unevenly Spaced Child Elements in CSS Flexbox?

Guide to adding text descriptions for synchronized media as outlined in WCAG 2.0 Success Criterion 1.2.2

What is the process of implementing a tree view hierarchy in PHP using CodeIgniter?

Minimize duplication of HTML code by refraining from PHP usage

What is the best way to add an array into another array?

Trigger an "onMouseMove" event when the "pointer-events-none" css property is applied to fire

Basic JavaScript Calculator Utilizing JQuery

Concealed HTML element or generated on-the-fly using JavaScript

What could be causing the issue with image handling in ASP.NET deployed on a local IIS server?

What are the benefits of incorporating frontend libraries into our projects?