The height of the inner div is not extending all the way down to 100% size

I can't seem to get the green div's height to cover the red div by setting it to 100%. Other solutions I've tried like setting parent div heights to 100% haven't worked either. Can someone spot what's wrong with my code? Appreciate any help!

#sharing {
    background: lightgreen;
    width: 44%;
    height: 100%;
    float: left;
    padding-right: 25px;
    border-right: 2px solid yellow;
}

#newsletter {
    background: lightblue;
    width: 56%;
    height: 100%;
    float: left;
    padding: 0 0 0 25px;
}

#footer-wrap {
    width: 100%;
    height: auto;
    background: #00f;
    margin: 0 auto 50px auto;
    overflow: auto;
    padding: 50px 0 0 0;
    margin: 0;
}

.f1 {
    display: block;
    text-transform: uppercase;
    color: darkblue;
    font-size: 20px;
    line-height: 1;
    padding-bottom: 15px;
}

.f2 {}

.clear { clear: both; }

.stretched-container {
    max-width: 960px;
    height: auto;
    background: #f00;
    margin: 0 auto;
    text-align: center;
}
<!-- BOOTSTRAP -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<footer id="footer-wrap">
        <div class="stretched-container">
            <div id="sharing">
                <span class="f1">Share page</span>
                <span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span>
            </div>
            <div id="newsletter">
                <span class="f1">Newsletter Signup</span>
                <span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span>
            </div>
            <div class="clear"></div>
        </div>
    </footer>

htmlcss

Answer №1

When the height of the parent div is set to auto, it will only expand when either of the child divs (.sharing or .newsletter) increases in height, both of which are set to 100%. To ensure that both child divs have a height of 100% relative to the parent, regardless of content filling them entirely, they can be displayed in a table format.

#footer-wrap {
  width: 100%;
  height: auto;
  background: #00f;
  margin: 0 auto 50px auto;
  overflow: auto;
  padding: 50px 0 0 0;
  margin: 0;
  display: table;
}

.stretched-container {
  max-width: 960px;
  height: auto;
  background: #f00;
  margin: 0 auto;
  text-align: center;
  display: table;
}

#sharing {
  background: lightgreen;
  width: 44%;
  height: 100%;
  padding-right: 25px;
  border-right: 2px solid yellow;
  display: table-cell;
}

.f1 {
  display: block;
  text-transform: uppercase;
  color: darkblue;
  font-size: 20px;
  line-height: 1;
  padding-bottom: 15px;
}

.f2 {}

#newsletter {
  background: lightblue;
  width: 56%;
  height: 100%;
  padding: 0 0 0 25px;
  display: table-cell;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<footer id="footer-wrap">
  <div class="stretched-container">
    <div id="sharing">
      <span class="f1">Share page</span>
      <span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span>
    </div>
    <div id="newsletter">
      <span class="f1">Newsletter Signup</span>
      <span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span>
    </div>
  </div>
</footer>

Answer №2

To simplify the layout, consider setting a specific height on the parent container and using flexbox instead of float: left.

#sharing {
    background: lightgreen;
    width: 44%;
    height: 100%;
    padding-right: 25px;
    border-right: 2px solid yellow;
}

#newsletter {
    background: lightblue;
    width: 56%;
    height: 100%;
    padding: 0 0 0 25px;
}

#footer-wrap {
    width: 100%;
    height: auto;
    background: #00f;
    margin: 0 auto 50px auto;
    overflow: auto;
    padding: 50px 0 0 0;
    margin: 0;
}

.f1 {
    display: block;
    text-transform: uppercase;
    color: darkblue;
    font-size: 20px;
    line-height: 1;
    padding-bottom: 15px;
}

.f2 {}

.clear { clear: both; }

.stretched-container {
    max-width: 960px;
    /* Fixed height */
    height: 350px;
    background: #f00;
    /* Using flexbox */
    display: flex;
    margin: 0 auto;
    text-align: center;
}
<!-- BOOTSTRAP -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<footer id="footer-wrap">
        <div class="stretched-container">
            <div id="sharing">
                <span class="f1">Share page</span>
                <span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span>
            </div>
            <div id="newsletter">
                <span class="f1">Newsletter Signup</span>
                <span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span>
            </div>
            <div class="clear"></div>
        </div>
    </footer>

Answer №3

For a child element to reach its full potential at 100%, the parent's height must be specified rather than left as auto.

To achieve this, include the following CSS code:

html,#main-wrapper,#footer {
  height: 100%;
}

You can also manually set the desired height for each of these elements.

Answer №4

To apply the display flex property to the #footer-wrap:

#sharing {
    background: lightgreen;
    width: 44%;
    height: 100%;
    float: left;
    padding-right: 25px;
    border-right: 2px solid yellow;
}

#newsletter {
    background: lightblue;
    width: 56%;
    height: 100%;
    float: left;
    padding: 0 0 0 25px;
}

#footer-wrap {
    width: 100%;
    height: auto;
    background: #00f;
    margin: 0 auto 50px auto;
    overflow: auto;
    padding: 50px 0 0 0;
    margin: 0;
    display:flex; /* Add this line */
}

.f1 {
    display: block;
    text-transform: uppercase;
    color: darkblue;
    font-size: 20px;
    line-height: 1;
    padding-bottom: 15px;
}

.f2 {}

.clear { clear: both; }

.stretched-container {
    max-width: 960px;
    height: auto;
    background: #f00;
    margin: 0 auto;
    text-align: center;
}
<!-- BOOTSTRAP -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<footer id="footer-wrap">
        <div class="stretched-container">
            <div id="sharing">
                <span class="f1">Share page</span>
                <span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span>
            </div>
            <div id="newsletter">
                <span class="f1">Newsletter Signup</span>
                <span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span>
            </div>
            <div class="clear"></div>
        </div>
    </footer>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transitioning to mui5's sx prop instead of makeStyles is generating a typescript error - none of the overloads match this call when passing an object with

I encountered an issue while converting a component to mui 5. Here is the original code snippet: const useStyles = makeStyles({ imageContainer: { display: "flex", width: "65%", float: "left", marginRight ...

cssreactjstypescriptmaterial-ui

What is a way to close a message box (div) when clicking outside using only HTML code, as jQuery is not allowed on the page?

Can anyone assist me in finding a way to close a DIV (message box) when clicked outside of it? Additionally, the current buttons are not aligned in the same line. Is there a code available to align all buttons in one line? I am looking ...

htmlcssbutton

Two columns of equal height featuring three card UI elements

I'm currently working with Bootstrap 4 and I have a grid set up with 1 row containing 2 columns and 3 card elements. However, I am struggling to adjust the height of the blue card element to align with the yellow card element. I want both cards to ha ...

htmlcssbootstrap-4flexbox

When the parent div contains at least four divs, show the scroll arrow containers

In my code, there is a parent div that holds multiple child divs. If the number of child divs within the parent div exceeds 4, I want to show the scroll arrow containers. If it's less than 4, then those arrow containers should not be displayed. The ...

javascripthtml

Is there a way to determine the length of a variable containing a mixture of characters in HTML and PHP?

Let's say someone wants their username to be GreenApples-72. How can you determine the number of letters, numbers, and symbols in the username and add them together? if((($_POST['username'])<'2')) // Checking if the length of t ...

phphtmlvariables

Tips for aligning a Material UI FAB button in the center and keeping it in the center while resizing the window

Is there a way to center a MaterialUI FAB button and keep it centered while resizing the window? The current positioning is not centered, as seen in the screenshot below, and it does not adjust with window size changes. Below is the code for the current F ...

cssreactjsmaterial-ui

What is the best way to create rounded corners on a WordPress login page?

I recently implemented the Custom Login Page Customizer plugin on my WordPress website and it has created a beautiful login page. While I was able to round the corners of my logo using CSS, I'm struggling to achieve the same effect on the login form. ...

csswordpresscustomizationrounded-corners

Issue with flash installation

I'm currently working on a WordPress website at www.studium.cl. However, I've encountered an issue when trying to open it in Internet Explorer. Each time I try to access the site, a window pops up prompting me to install Adobe Flash Player. Even ...

phphtmlflashwordpress

Issue regarding the sidebar's top alignment

Having trouble with the positioning of this sidebar. It seems to be hanging slightly over the top edge instead of aligning perfectly with it. Here's how it looks: enter image description here. CSS CODE: https://pastebin.com/RUmsRkYw HTML CODE: https ...

htmlcssbrowsernavigationsidebar

Modify the color of the table map based on specific conditions in a React.js application

To modify the table entry's color based on the current balance, follow these conditions: If the current balance is less than 100, it should be shown in red. If the current balance is between 100 and 200, display it in yellow. Otherwise, show it in gre ...

javascriptcssreactjsreact-redux

I am facing an issue where Bootstrap button classes are duplicating when I inspect the code. How can I resolve this

Can anyone help me with an issue I am facing with a Bootstrap button? Despite using only the btn btn-default classes, when inspecting it in Chrome, multiple classes are being displayed on the button. I'm unable to figure out why this is happening and ...

javascripthtmlangularjstwitter-bootstrap

The hyperlinks on the webpage are not functioning

I am encountering an issue with a link on a particular page. When scrolling down, the link works perfectly; however, when I attempt to scroll up, it remains in the same position. Here is a snippet of the code: (function($){ /* Store the original positions ...

javascriptjqueryhtmlcsshref

"Resolving the duplication issue of a textbox in Phonegap app

I encountered a strange issue recently. While trying to focus on the textbox in my PhoneGap application using touch, I noticed that there are actually 2 textboxes appearing. Please refer to the attached image: ...

androidhtmlcsscordova

Animated image inside clickable element (HTML, CSS)

Is there a method to embed a gif within a button and have it activate on hover? ...

htmlcssbuttongif

Updating the content of a window without the need to refresh the page using JavaScript

Is there a way to navigate back to the previous window in chat_user without refreshing the entire page when the back button is clicked? Below is the code I have tried: <a href="" onclick="window.history.go(-1); return false;">back</a> ...

javascriptjqueryhtmlcss

What methods can we use to transform Bootstrap rows and columns to resemble a table design?

Attempt number one did not work due to padding issues in the columns. Attempt number two also failed, leading me to believe I may be making a mistake somewhere. This is what I am aiming for: https://i.sstatic.net/yTz6o.png Can anyone provide some assis ...

twitter-bootstrapcss

CSS/SCSS/JS: Adjusting header height dynamically while keeping it fixed at the

Check out my Codepen demo here: https://codepen.io/nickfindley/pen/dJqMQW I am seeking to replicate the current behavior of the page without specifying a fixed height for the header. The goal is to make the header adjust dynamically based on the content, ...

javascriptcssfixed

Struggling to align Bootstrap toasts in the center horizontally

Currently utilizing Bootstrap 4.6.1 (due to compatibility issues with bootstrap-select and newer versions) and endeavoring to center some toasts horizontally within a page using the code below: <div class="d-flex flex-row justify-content-c ...

cssbootstrap-4bootstrap-toast

Press the button to execute a PHP script without redirecting the current page

Looking for a solution to make my webpage more user-friendly. I have a table generated from MySQL with buttons at the beginning of each row. When a user clicks on a button, I want the content of that specific row to be transferred to another MySQL table. ...

phphtml

Expanding Images with React-Bootstrap Cards

I need assistance with setting up cards in React-Bootstrap. The Card component is enlarging my images beyond their original sizes. When I attempt to place the image in an img tag outside of the card, it displays at its normal size. Can someone provide guid ...

javascriptcssreactjsbootstrap-4react-bootstrap