Dynamic Page Height

Question

ObSys 56 Junior Poster

10 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 web-design

3 Contributors
5 Replies
335 Views
23 Hours Discussion Span
Latest Post 10 Years Ago Latest Post by JorgeM

pixelsoul 272 Red Pill

10 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

10 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 10 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.