Dynamic Page Height

Question

ObSys 56 Junior Poster

12 Years Ago

Basically I am creating a web page that is going to eventually load content dynamically using PHP.

Right now I am constructing the HTML/CSS for the page so that the design is complete.

My problem is that when I add x amount of content to my page, the content simply overflows out of the element, across the top of my footer and down the page.

What I want is for the content area to resize automatically keeping my footer at the bottom so that all the content is displayed correctly.

Below is a copy of my current web page.

thankyou

HTML

<!DOCTYPE html>

<html>

    <head>
        <link rel='stylesheet' type='text/css' href='layout.css'/>
        <link href='http://fonts.googleapis.com/css?family=Orienta|Orbitron:700' rel='stylesheet' type='text/css'>
        <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    </head>

    <body>

        <header>
            <nav>
            <span id="logo"><a href="index.html">LOGO</a></span>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>

        <div id="wrapper">
            <div class="content">
                <div class="leftSide">
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                    <p>Left</p> 
                </div>

                <div class="rightSide">
                    <p>Right</p>
                </div>
            </div>

            <footer>
                <div class="footer">
                    <div class="footerInfo">
                        <h3>My Places</h3>
                        <ul>
                            <li><a href="#">Twitter</a></li>
                            <li><a href="#">Google+</a></li>
                            <li><a href="#">Youtube</a></li>
                            <li><a href="#">Daniweb</a></li>
                        </ul>
                    </div>

                    <div class="footerInfo">
                        <h3>Site Info</h3>
                        <ul>
                            <li><a href="#">About Me</a></li>
                            <li><a href="#">Sitemap</a></li>
                        </ul>
                    </div>
                </div>
            </footer>
        </div>
    </body>
</html>

CSS

/*
 *  Green: #32CF0A
 */

*{
    margin: 0;
    padding: 0;
}

html, body{
    height: 100%;
    width: 100%;
    background: #555;
    font-family:'Orienta', sans serif;
}

#wrapper{
    height: 100%;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}

/* PAGE ELEMENTS */
header{
    color: white;
}

/* LOGO */
#logo a{
    margin-left: 25px;
    font-size: 45px;
    font-family: 'Orbitron', sans-serif;
    text-shadow: 0px 0px 8px #32CF0A;
}

/* NAVIGATION */
nav{
    width: 100%;
    height: 100%;
    float: left;
    background: #1C1B1B;
    font-size: 15px;
}

nav ul{
    list-style: none;
    float: right;
    margin-right: 75px;
}

nav ul li{
    float: left;
    padding: 40px 25px 5px 25px;
    margin-left: 15px;
}

nav ul li a:hover{
    text-shadow: 0px 0px 6px #FFF;
}

/* CONTENT */
a{
    text-decoration: none;
    color: white;
}

.content{
    height: 90%;
    width: 100%;
    background: #EEEEEE;
}

.leftSide{
    float: left;
    height: 90%;
    width: 70%;
    background: red;
}

.rightSide{
    float: left;
    height: 90%;
    width: 30%;
    background: blue;
}

/* FOOTER */
footer{
    height: 180px;
    width: 100%;
    font-size: 10pt;
}

.footer{
    height: 120px;
    width: 100%;
    background: #343434;
    box-shadow: 0 14px 6px -6px rgba(0,0,0,0.7);
}

.footerInfo{
    margin-left:70px;
    margin-top: 20px;
    float: left;
}

.footerInfo h3{
    color: #43DFD4;
    padding-bottom: 4px;
}

.footerInfo ul{
    list-style: none;
    text-align: center;
}

.footerInfo li a{
    color: white;
}

.footerInfo li a:hover{
    text-decoration: underline;
    color: #43DFD4;
}

html-css javascript web-design

3 Contributors
5 Replies
410 Views
23 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by JorgeM

Dani AI

Generated 9 Months Ago

The overflow and footer overlap stem from two common layout issues: columns are either floated without the parent being cleared, or they use percentage/fixed heights that don't adapt when dynamic content is inserted. 's page shows both behaviors — the browser can't grow the parent if children are taken out of normal flow or constrained by a height, so extra content ends up overlapping the footer.

A modern, robust CSS-only fix is to ditch the floats and let Flexbox handle equal heights and natural growth:

.content {
  display: flex;
  gap: 20px;            /* optional spacing between columns */
  align-items: stretch; /* makes columns the same height */
}
.leftSide { flex: 1; min-width: 0; }
.rightSide { flex: 0 0 320px; } /* fixed sidebar width or use flex-basis */

If maintaining floats is preferred, make the parent contain them (clearfix) so it grows with children:

.content::after {
  content: "";
  display: table;
  clear: both;
}

For keeping the footer at the bottom when page content is short, use a column flex layout on the page root instead of hard-coding heights:

html, body { height: 100%; }
body { display: flex; flex-direction: column; }
#wrapper { flex: 1 0 auto; } /* main area expands to fill available space */
footer { flex-shrink: 0; }

When older browsers are a concern or a precise equal-height fallback is needed after server/AJAX content insertion, a small post-load script can measure and set heights (as suggested and noted, removing fixed height styles first is crucial). Also verify the footer isn't absolutely positioned or given a z-index that forces it over flow; use DevTools to inspect computed heights. Running any JS-resize routine after dynamic inserts will prevent mismatches when content changes.

All 5 Replies

pixelsoul 272 Red Pill

12 Years Ago

something like this? http://jsfiddle.net/2TZWD/

JorgeM commented: I use this technique all the time..nice suggestion. +12

JorgeM 958 Problem Solver

12 Years Ago

Just to point out in the event its not obvious, in pixelsoul's example, aside from the jQuery code to match the heights, he removed the height properties from the leftside and rightside content divs. that's important to note otherwise, it would seem that the jQuery code doesnt work properly.

Here is a similar example that does basically the same thing using plain JavaScript:

Dynamically Resize Height of Div Elements

In the JavaScript example, it compares the height of both divs and simply increases the height of the shorter div to match the height of the longer div since you may not know the height of the divs ahead of time due to dynamic content in the divs.

Edited 12 Years Ago by JorgeM

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ObSys 56 Junior Poster · Answer 1 · 2013-11-20T15:29:40+00:00

Is there any way to do this just with HTML/CSS?

If not is there a way to do it with PHP as thats the language I will be using for dynamic content.

Thankyou

pixelsoul 272 Red Pill Featured Poster · Answer 2 · 2013-11-20T19:37:13+00:00

Are you suggesting javascript is not good enough for you??

just kidding.

Using javascript to do it would be the best way in my opinion. I haven't explored any other ways to possibly do it because I didn't feel like there is a better way.

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 3 · 2013-11-20T22:40:16+00:00

If not is there a way to do it with PHP as thats the language I will be using for dynamic content.

You may be using PHP server side for generating the dynamic content, but you handle the styling client side. In the case of the HTML elements containing this content, if you cannot predict the height that you need, then you allow the height to size itself automatically. If you want both divs to match their heights, the only solution i know is client side where you check both heights, find the larger height, then change the height of the shorter content element to match the height of the other one. I dont know any other way to do this without client side javascript either.

Dynamic Page Height

Dani AI

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers