www.webdeveloper.com
Results 1 to 3 of 3

Thread: Positioning relative div between fixed divs

Hybrid View

  1. #1
    Join Date
    Aug 2013
    Posts
    6

    Positioning relative div between fixed divs

    I am trying to create a page with a fixed header and a fixed footer. I would like to display content immediately below the header and have its relative position maintained when the window is re-sized. When the content is too large for the display, I would like a vertical scroll bar to appear so the content can be scrolled between the header and footer. I have not been able to achieve this.
    I've attached test code. When I re-size the webpage, the content area is not positioned immediately under the header and the scroll bar is not active.

    What technology should I look into (php, javascript, etc) to solve this problem? Any help would be much appreciated. Many thanks in advance.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="mydemo.css">
    </head>

    <body>
    <div class="pageHeader">
    This is the header.
    </div>
    <div class="pageContent">
    <div class="container">
    Line 1<br>
    Line 2<br>
    Line 3<br>
    Line 4<br>
    Line 5<br>
    Line 6<br>
    Line 7<br>
    Line 8<br>
    Line 9<br>
    Line 10<br>
    Line 11<br>
    Line 12<br>
    Line 13<br>
    Line 14<br>
    Line 15<br>
    Line 16<br>
    </div>
    </div>
    <div class="pageFooter">
    This is the footer.
    </div>
    </body>
    </html>

    body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: lightblue;
    }
    .pageHeader {
    position: fixed;
    width: 100%;
    height: 10%;
    top: 0;
    text-align: center;
    background: yellow;
    opacity: .5;
    z-index: 2;

    }
    .pageContent {
    position: fixed;
    width: 100%;
    margin-top: 10%;
    margin-bottom: 10%;
    background: lightgrey;
    }
    .pageContent .container {
    position: relative;
    width: 50%;
    top: 0;
    margin: auto;
    border: 1px solid blue;
    overflow: scroll;
    }
    .pageFooter {
    position: fixed;
    width: 100%;
    height: 10%;
    bottom: 0;
    text-align: center;
    background: yellow;
    opacity: .5;
    z-index: 2;
    }

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there Ron Ford,

    Try it like this...
    Code:
    
    <!DOCTYPE html>
    <html>
    <head>
    
    <title>Demo</title>
    
    <meta charset="utf-8">
    
    <link rel="stylesheet" href="mydemo.css">
    
    <style>
    html,body {
        height:100%;
        min-height:210px;
        margin:0;
        background-color:rgb(173,216,230);
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:1em;
     }
    #container {
        position:relative;
        height:100%;
     }
    #pageHeader {
        height:10%;
        text-align:center;
        background-color:rgba(255,255,0,0.5);
     }
    #pageContent {
        width:50%;
        height:80%;
        margin:auto;
        overflow:auto;
        background-color:rgb(211,211,211);
        box-shadow:inset 0 0 2px rgb(0,0,255);
     }
    #inner {
        padding:2%;
     }
    #pageFooter {
        position:absolute;
        width:100%;
        height:10%;
        bottom:0;
        text-align:center;
        background-color:rgba(255,255,0,0.5);
     } 
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="pageHeader">
    This is the header.
    </div><!-- end #pageHeader -->
    
    <div id="pageContent">
    <div id="inner">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p><p>
    Phasellus porta, dui a elementum egestas, odio sapien rhoncus 
    lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 
    ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
    euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu 
    et mauris scelerisque tristique. Donec fringilla mauris dolor, 
    sit amet vulputate lacus. Nulla feugiat mattis nulla non 
    tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis 
    nisi eget neque tempus facilisis eu quis sapien.
    </p>
    </div><!-- end #inner -->
    </div><!-- end #pageContent -->
    
    <div id="pageFooter">
    This is the footer.
    </div><!-- end #pageFooter -->
    
    </div><!-- end #container -->
    
    </body>
    </html>
    
    
    coothead

  3. #3
    Join Date
    Aug 2013
    Posts
    6
    Thank you. That works a lot better.
    I moved the pageheader and pagefooter outside the container. This prevents them from scrolling.
    Also, I found that setting the header and footer heights to a fixed unit (px or em) rather that a percentage, maintained the alignment of the page content with the bottom of the header. With a percentage height, the relationship changes as the page width is resized (I don't understand why).
    The following modified code works exactly as I want. Thanks again for pointing me in the right direction.

    <html>
    <head>
    <title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="mydemo.css">
    </head>

    <body>
    <div id="pageHeader">
    This is the header.
    </div>
    <div id="container">
    <div id="pageContent">
    <div id="inner">
    Line 1<br>
    Line 2<br>
    Line 3<br>
    Line 4<br>
    Line 5<br>
    Line 6<br>
    Line 7<br>
    Line 8<br>
    Line 9<br>
    Line 10<br>
    Line 11<br>
    Line 12<br>
    Line 13<br>
    Line 14<br>
    Line 15<br>
    Line 16<br>
    </div>
    </div>
    </div>
    <div id="pageFooter">
    This is the footer.
    </div>
    </body>
    </html>

    body {
    height: 100%;
    min-height: 210px;
    margin: 0;
    padding: 0;
    border: 0;
    background: lightblue;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 1em;
    }
    #pageHeader {
    position: fixed;
    width: 100%;
    height: 3em;
    top: 0;
    text-align: center;
    background: yellow;
    opacity: .5;
    z-index: 2;

    }
    #pageContent .container {
    position: relative;
    height: 100%;
    }
    #pageContent {
    width: 50%;
    overflow: auto;
    margin: auto;
    margin-top: 3em;
    margin-bottom: 3em;
    background: lightgrey;
    box-shadow: inset 0 0 2px rgb(0,0,255);
    }
    #inner {
    padding: 2%;
    }
    #pageFooter {
    position: fixed;
    width: 100%;
    height: 3em;
    bottom: 0;
    text-align: center;
    background: yellow;
    opacity: .5;
    z-index: 2;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles