Wrapper 100% Höhe, festen footer und Menü behoben

Ich weiß, dieses Thema wurde eröffnet 1000 mal, aber ich finde nicht die passende Lösung (oder eine Lösung, die ich verstehen konnte).

Habe ich eine einfache Seite (wordpress) mit einem festen nav-Menü auf der linken Seite, scrollbare Inhalte in der Mitte und einen festen footer (der immer sichtbar ist).

Habe ich 2 Probleme habe ich zu lösen versucht, in jeder Hinsicht:

1) die Verpackung (100% Höhe) umschließt ok, bis Sie die Seite scrollen, aber nicht verlängern, nach den Blättern (siehe angehängtes Bild, die Seite wird nach unten gescrollt).

2) der Inhalt an der Unterseite ist unter dem footer, ich konnte nicht einen Weg finden, anwenden -30 Polsterung zu machen, lesbar der Letzte Teil des Inhalts ( ich denke, das bezieht sich auf das problem nicht.1).

Hier ist die CSS (auch ein reset.css basiert auf YUI reset):

  /* LAYOUT */

.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }

br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 }


/* GENERAL LAYOUT */


html, body{
    margin    : 0;
    padding   : 0;
    height    : 100%;
    border    : none;
}


#wrapper{

    min-height: 100%;
    width: 100%;
    background: red;
    overflow: hidden;
}

#container{

    width: 960px;
    margin-left: 40px;
    padding-bottom: 30px

}

#navigation{
    position: fixed;
    overflow:hidden;
    width: 200px;

}

#content{

    position: absolute;
    overflow: auto;
    width: 420px;
    margin-left: 220px;


}

li > a {
    display: block;
}

a {outline: none;}

/* NAVIGATION */

h1.logo {
    height: 155px;
}

#navigation ul{  
    margin:0;  
    padding:0;  
    text-align: right;

}  

#navigation ul li{  

    height:28px;  
    display: inline-block;
    color:#000;  
    padding: 0 0 0 0;

    overflow:hidden;  
    line-height: 28px;
    margin-bottom: 7px;

}  

#navigation li a{  

    padding: 0 28px 0 0;

}  

.nav-blog{
    width:190px;  
    border-left-color: #d1bbe8;
    border-left-width: 10px;
    border-left-style: solid;
    background-color: #edece6;

}

.nav-eventi{
    width:190px;
    border-left-color: #aa87a0;
    border-left-width: 10px;
    border-left-style: solid;
     background-color: #edece6;

}

.nav-bio{
    width:190px;
    border-left-color: #e2b893;
    border-left-width: 10px;
    border-left-style: solid;
     background-color: #edece6;

}

.nav-discography{
    width:190px;
    border-left-color: #365f68;
    border-left-width: 10px;
    border-left-style: solid;
     background-color: #edece6;

}

.nav-photos{
    width:190px;
    border-left-color: #545768;
    border-left-width: 10px;
    border-left-style: solid;
     background-color: #edece6;

}

.nav-videos{
    width:190px;
    border-left-color: #4b5668;
    border-left-width: 10px;
    border-left-style: solid;
     background-color: #edece6;

}

.nav-contact{
    width:190px;
    border-left-color: #686055;
    border-left-width: 10px;
    border-left-style: solid;
     background-color: #edece6;

}

/* ----------Active links----------- */

.home .nav-blog 
{
    width: 150px;
}

/* POST */

#ilpost{

    width: 420px;
    margin: 0 0 18px 0;

}

.spaziovuoto{

    height: 155px;
}

.type-blog{

    border-top-color: #d1bbe8;
    border-top-style: solid;
    border-top-width: 12px;

}

#tempo{

    height: 32px;
    background: url('../images/flatback.png');

}

.iltitolo{

    background-color: #edece6;

}

.ilcontenuto{

    background-color: #edece6;

}


/* PLAYER */

#player{

    clear: both;
    width: 100%;
    position: fixed;
    bottom: 0px;
    height: 30px;
    background: #000;
    color:#fff;


}

Und HTML:

(Kopf weggelassen)

<body class="home blog"> 
    <div id="wrapper"> 
        <div id="container">            
            <div id="navigation"> 
                <h1 class="logo">Logo</h1> 
                <ul> 
                    <li class="nav-blog "><a href="/">blog</li> 
                    <li class="nav-eventi sel"><a href="/">eventi</a></li> 
                    <li class="nav-bio sel"><a href="/">bio</a></li> 
                    <li class="nav-discography sel"><a href="/">discography</a></li> 
                    <li class="nav-photos sel"><a href="/">photos</a></li> 
                    <li class="nav-videos sel"><a href="/">videos</a></li> 
                    <li class="nav-contact sel"><a href="/">contact</a></li> 
                </ul> 
            </div><!-- .navigation --> 
<script type="text/javascript">  

            jQuery(function($){
                $.supersized({
                    //Background image
                    transition_speed : 50,
                    slides  :  [ { image : 'http://localhost/xxxxxxxx/wp-content/themes/xxxxxxxxxx/images/sfondotest1080.jpg' } ]                   
                });
            });

        </script> 
        <div id="content"> 
        <div class="spaziovuoto"></div> 
                <!-- LOOOOOOOOOOOP --> 


                        <div id="ilpost" class="type-blog"> 

                                                <div id="tempo"> 
                        Uncategorized //10 April, 2011</div><!-- .tempo --> 
                        <div class="ilcontenuto"> 
                        <p class="iltitolo">test post 4</p> 
                        <p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} -->Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue.</p> 
<p>&nbsp;</p> 
</div> 
                    </div><!-- .ilpost --> 


                        <div id="ilpost" class="type-blog"> 

                                                <div id="tempo"> 
                        Uncategorized //10 April, 2011</div><!-- .tempo --> 
                        <div class="ilcontenuto"> 
                        <p class="iltitolo">test post 3</p> 
                        <p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} -->Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue.</p> 
<p>&nbsp;</p> 
</div> 
                    </div><!-- .ilpost --> 


                        <div id="ilpost" class="type-blog"> 

                                                <div id="tempo"> 
                        Uncategorized //10 April, 2011</div><!-- .tempo --> 
                        <div class="ilcontenuto"> 
                        <p class="iltitolo">test post 2</p> 
                        <p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} --> <!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} -->Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue.</p> 
<p>&nbsp;</p> 
</div> 
                    </div><!-- .ilpost --> 


                        <div id="ilpost" class="type-blog"> 

                                                <div id="tempo"> 
                        Uncategorized //10 April, 2011</div><!-- .tempo --> 
                        <div class="ilcontenuto"> 
                        <p class="iltitolo">Hello world!</p> 
                        <p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p> 
</div> 
                    </div><!-- .ilpost --> 

        </div><!-- .content --> 


            <ul class="xoxo"> 



                    </ul> 


            </div> <!--  container --> 
</div> <!--  E wrapper--> 
<div id="player">Player</div> 
</body> 
</html>

Nur für den Fall, befestigte ich ein Bild mit einer Erklärung.

Wrapper 100% Höhe, festen footer und Menü behoben

Vielen Dank für Ihre Hilfe!

InformationsquelleAutor Andycap | 2011-04-12

  1. 2
    #navigation{
    position: fixed;
    overflow:hidden;
    width: 200px;
    left: 40px; /* add this */
}

#content{

    /*position: absolute; remove this*/
    overflow: auto;
    width: 420px;
    margin-left: 220px;
}

    deine Seite hat keinen Inhalt.. gut er denkt es nicht 😉

    so entfernen Sie die absolute Positionierung von Inhalt .. lassen Sie die Inhalte bleiben im flow das sollte bedeuten, dass die vorhandenen min-height auf der Hülle tatsächlich eine chance bekommt zu arbeiten (auf die minute, die es denkt, es gibt nichts in ihm, so kann es nicht wachsen)

    dann erscheint zu arbeiten, aber im IE7 wird das ein bisschen pingelig, wie Sie es tut und bewegt die nav über den Inhalt - also nur explizit (geben Sie eine tsk und) erzählen, wo Sie es haben wollen (helfen, es zu zählen!) und fügen Sie die Links auf #navigation

    Es funktioniert...was für ein Kopfschmerz es wurde unter meinen Augen (wie üblich!) Vielen, vielen Dank !!
    Du bist herzlich Willkommen.. ich vergaß zu erwähnen, dass #2 - aber ich denke, du hast Recht und es war wohl zusammenhängen, da ich nicht sehen - ist es fest zu?
    ja ist es behoben 🙂
    Eine neue Frage kam...wenn der Inhalt kürzer ist als das browser-Fenster, das ursprüngliche problem tritt auf, wrapper werden nicht mehr 100%. Irgendwelche Ideen?
    Gelöst...mein Fehler. Körpergröße 100% fehlt. nochmals vielen Dank.

    InformationsquelleAutor clairesuzy

  2. 0

    Haben Sie versucht, mit min-height: 100% statt height: 100% auf Ihren Körper und html-Stile?

    InformationsquelleAutor Gareth

  3. -1

    Soweit die Hülle, nehmen Sie die 100% Höhe. Es wird die Standardeinstellung " automatisch Höhe und zu erweitern, um den Inhalt.

    Für die Inhalte unter der Fußzeile, die Sie gerade anwenden einer unteren Polsterung, um den Inhalt, und nehmen Sie die absolute Positionierung. Einfach setzen Sie einen linken Rand (und evtl. ein float).

    InformationsquelleAutor Mechwd

Schreibe einen Kommentar