Simple CSS question header, footer and expanding middle

Discussion in 'Web Design and Development' started by whitedragon101, Apr 1, 2014.

  1. whitedragon101 macrumors 6502a

    Joined:
    Sep 11, 2008
    #1
    I have four DIVs

    wrapper = contains everything height and width should be 100%
    header = a header I want to be 50 pixels high and 100% width
    mapcontent = a google map I want to be 100% width and 100% height
    footer = a footer I want to be 50 pixels high and 100% width locked to the bottom of the screen not matter the screen size

    Basically I need header always the same height locked to the top and footer always the same size locked to the bottom and malcontent taking up all space in between.

    In the code below the footer does not push the container up so the footer covers the lower map controls. Even if you delete the footer div the lower part of the map_container div is off the bottom of the visible window area.

    Any help appreciated :

    PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <
    title></title>

    <
    style>
    htmlbody {height100%}

    #wrapper 
    {
        
    width:100%;
         
    height:100%; 
        
    min-height:100%; 
        
    background-color#CFF;  /* LIGHT BLUE */
    }
    #header
    {
        
    height50px;
        
    width:100%;
        
    background-color#F0F; /* PINK */
    }
    #map_container
    {
        
    height100%;
        
    min-height:100%; 
        
    width:100%;
        
    overflow-yhidden;
        
    background-color#06F;  /*DARK BLUE */
    }
    #footer
    {
        
    positionfixed;
        
    z-index10;
        
    height50px;
        
    width100%;
        
    background-color#0F0; /* GREEN */
        
    bottom0px;
    }
    </
    style>

    </
    head>

    <
    body>

    <
    div id="wrapper">

    <
    div id="header"></div>
        
    <
    div id="map_container">
        
        <
    iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d8120655.7476568185!2d34.89248265!3d-6.372825300000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x184b51314869a111%3A0x885a17314bc1c430!2sTanzania!5e0!3m2!1sen!2suk!4v1396366970642" width="100%" height="100%" frameborder="0" style="border:0"></iframe>

    </
    div
     
     <
    div id="footer"> </div>        

    </
    div>  <!-- CLOSE WRAPPER DIV -->

    </
    body>
    </
    html>

     
  2. Flood123 macrumors 6502a

    Flood123

    Joined:
    Mar 28, 2009
    Location:
    Living Stateside
    #2
    I might be wrong but in this case you have a map with its + and - controls being pulled in with an iframe. You have the height of the map set to 100% extending to the bottom of the browser window. You also have a fixed position footer with a z-index higher that the map putting it right over your controls. Unless you have control over where the maps navigation is the footer will ALWAYS cover it, the way you currently have this set up. I think a fixed footer in the case might not be the most elegant way of doing this however if you really have to, try adding padding-bottom: 50px; to the bottom of your #map_container. See if that gets you close enough to where you need to be.
     
  3. Flood123 macrumors 6502a

    Flood123

    Joined:
    Mar 28, 2009
    Location:
    Living Stateside
    #3
    I am curious if you ever reached any sort of resolution on this.
     
  4. Haynzee macrumors member

    Joined:
    Mar 13, 2012
    #4
  5. Moshu, Apr 6, 2014
    Last edited: Apr 6, 2014

    Moshu macrumors member

    Joined:
    May 3, 2012
    #5
    Here you go :cool:

    People hate <table> but sometimes it's what you need to get the job done :D

    PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <
    title></title>

    <
    style>
    htmlbody {height100%; margin:0;padding:0}

    #wrapper 
    {
        
    width:100%;
        
    height:100%; 
        
    min-height:100%; 
        
    background-color#CFF;  /* LIGHT BLUE */
    }
    #header
    {
        
    height50px;
        
    width:100%;
        
    background-color#F0F; /* PINK */
        
    position:fixed;
        
    top:0;
    }
    #map_container
    {
        
    height100%;
        
    width:100%;
        
    overflow-yhidden;
        
    background-color#06F;  /*DARK BLUE */
    }
    #footer
    {
        
    positionfixed;
        
    z-index10;
        
    height50px;
        
    width100%;
        
    background-color#0F0; /* GREEN */
        
    bottom0px;
    }
    </
    style>

    </
    head>

    <
    body>

    <
    div id="wrapper">

        <
    table border="0" cellpadding="0" cellspacing="0" style="height:100%; width:100%;">
            <
    tr style="height:50px;">
                <
    td>
                    <
    div id="header"></div>
                </
    td>
            </
    tr>
            <
    tr style="height:100%;">
                <
    td>
                    <
    div id="map_container">
                        <
    iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d8120655.7476568185!2d34.89248265!3d-6.372825300000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x184b51314869a111%3A0x885a17314bc1c430!2sTanzania!5e0!3m2!1sen!2suk!4v1396366970642" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
                    </
    div
                </
    td>
            </
    tr>
            <
    tr style="height:50px;">
                <
    td>
                    <
    div id="footer"> </div>  
                </
    td>
            </
    tr>
        </
    table>

    </
    div>  <!-- CLOSE WRAPPER DIV -->

    </
    body>
    </
    html>
    Letme know if this is what you wanted.

    EDIT: I've also added "margin:0; padding:0" to your html and body style declaration, as on my browser (Chrome, Windows) there was a white border around the wrapper DIV.
     

Share This Page