Challenges related to height

Question

Challenges related to height

Having an issue with height in my code. My footer is set up like this:

<html>
<body>
    <div class='wrap'>
        <div class=principal></div>
        <div class='clear'></div>
        <footer><img alt='Logotype' /></footer>
    </div>      
</body>
</html>


html,body{
    height:100%;
};

.wrap{
    height:auto!important;
    height:100%;
    min-height:100%;
    width:100%;
}

.clear{
    clear:both;
}

footer{
    position:absolute;
    bottom:0;
    height:50px;
    width:100%;
}

Another approach would be adding margin: 0 auto -50px to the .wrap and moving the footer outside of it.

I want the .principal element to take up the full height, especially when there isn't much content, as I have a component injecting a

<div style='height:100%>insert text and graphics/charts here</div>

into it.

Check out the examples below for better clarity:

Image 1:

Content at 100%

The content (.principal) should occupy 100% height due to the component. When a menu opens, it should match the size of the content (.principal), while keeping the footer at the bottom.

Image 2:

Scrollable Content

If there's more content (whether text or other elements), a scroll should appear while making the footer disappear and keeping the header fixed.

Image 3:

Example Image

At the end of the scroll, the footer should be visible. When the menu is open, it should match the height of the displayed content (i.e., height = window-height-footer).

Is there a way for an element to have a dynamic height of 100%, expanding when necessary?

Challenges:

Flexbox model can't be used due to IE8+ compatibility constraints.
Height: calc won't work due to Safari and IE limitations.
Can't set everything to height:100% because of the footer.
Unable to include images due to reputation reasons.

jquery html css

Answer 1

Answer №1

Have you been searching for this solution? Take a look below:

Demo:

A handy script that ensures your footer remains at the bottom of the page, adjusting with added content. (demo)

Here's an example implementation using this script: (I've also included a fixed navigation) html:

<div id="wrapper">

    <div id="header">
        <div id="nav"></div>
        <div id="content_push" style="width: 100%; height: 50px;"></div> <!-- keeps initial content above nav>
    </div><!-- #header -->

    <div id="content">
        Insert content here<br><br><br><br>
        Insert content here<br><br><br><br>
        Insert content here<br><br><br><br>
        Insert content here<br><br><br><br>
    </div><!-- #content -->

    <div id="footer">
    </div><!-- #footer -->

</div><!-- #wrapper -->

CSS:

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    background:#ededed;
    padding:0px;

}
#nav{
    width: 100%;
    height: 50px;
    position: fixed;
    background-color: green;
}
#content {
    padding-bottom:100px; /* Adjust based on footer height */
}
#footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

Give it a try: https://jsfiddle.net/krjoqfru/

Answer 2

Have you been searching for this solution? Take a look below:

Demo:

A handy script that ensures your footer remains at the bottom of the page, adjusting with added content. (demo)

Here's an example implementation using this script: (I've also included a fixed navigation) html:

<div id="wrapper">

    <div id="header">
        <div id="nav"></div>
        <div id="content_push" style="width: 100%; height: 50px;"></div> <!-- keeps initial content above nav>
    </div><!-- #header -->

    <div id="content">
        Insert content here<br><br><br><br>
        Insert content here<br><br><br><br>
        Insert content here<br><br><br><br>
        Insert content here<br><br><br><br>
    </div><!-- #content -->

    <div id="footer">
    </div><!-- #footer -->

</div><!-- #wrapper -->

CSS:

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    background:#ededed;
    padding:0px;

}
#nav{
    width: 100%;
    height: 50px;
    position: fixed;
    background-color: green;
}
#content {
    padding-bottom:100px; /* Adjust based on footer height */
}
#footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

Give it a try: https://jsfiddle.net/krjoqfru/

Answer 3

Answer №2

It's not clear to me what you're asking. Are you looking for a sticky footer?

html, body { height: 100%; }
#wrap { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -50px; }
#footer, #push { margin: 0 auto; height: 50px; }

<body>
  <div id="wrap">
    your content goes here
    <div id="push"></div>
  </div>
  <div id="footer">Your footer</div>
</body>

Answer 4

It's not clear to me what you're asking. Are you looking for a sticky footer?

html, body { height: 100%; }
#wrap { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -50px; }
#footer, #push { margin: 0 auto; height: 50px; }

<body>
  <div id="wrap">
    your content goes here
    <div id="push"></div>
  </div>
  <div id="footer">Your footer</div>
</body>

Answer 5

Answer №3

Here is some useful information for you.

* { margin: 0; padding: 0; }
body { height:100%; width: 100%; position: absolute; }
header { height: 50px; width: 100%; position: fixed; }
.principal { min-height: 100%; width: 100%; }
footer { height:50px; width:100%; }

<header style="background: green;"></header>
<div class='principal' style="background: red;"></div>
<footer style="background: blue;"></footer>

Answer 6

Here is some useful information for you.

* { margin: 0; padding: 0; }
body { height:100%; width: 100%; position: absolute; }
header { height: 50px; width: 100%; position: fixed; }
.principal { min-height: 100%; width: 100%; }
footer { height:50px; width:100%; }

<header style="background: green;"></header>
<div class='principal' style="background: red;"></div>
<footer style="background: blue;"></footer>

Challenges related to height

Answer №1

Answer №2

Answer №3

Similar questions

I can't figure out why the data in this JSON string keeps altering within my ajax function

Anchoring links on a webpage that provide users with a clear indication of their current position within the page

The slideUp and slideDown functions are not functioning properly

Ways to rotate SVG images exclusively upon clicking

Troubleshooting problem with iPhone X responsiveness

What is the best way to modify a variable in a nested element using ng-click in the parent element?

CSS: Alignment of Lists with Three Items

Click to reveal the hidden div located at the bottom of the webpage

Generate a single-page PDF document mirroring the content of a website

Retrieving JSON data with jQuery getResult

Creating diverse content for various tabs using JavaScript

Reference ngFor for Input Validation Template

"The issue seems to stem from a snippet of compact JavaScript

Is there a way for me to modify both the label number and text?

Sort your Laravel pagination table effortlessly with just one click

The Chrome Extension Javascript popup appears to be empty

Adjust background image size to fit the screen, not just the content

jsTree open_all not triggering consistently

Exploring the functionalities of jQuery within ajax-loaded content

Use both a PayPal form and a PHP form simultaneously by implementing a single button that can submit both forms with the help of jQuery and AJAX