Wrapper 100% высота, фиксированный нижний колонтитул и фиксированное меню - PullRequest
Новая
       37

Wrapper 100% высота, фиксированный нижний колонтитул и фиксированное меню

1 голос
/ 13 апреля 2011

Я знаю, эту тему открывали 1000 раз, но я не нашел подходящего решения (или решения, которое мог бы понять).

У меня есть простая страница (wordpress) с фиксированным навигационным меню слева, прокручиваемым контентом в центре и фиксированным нижним колонтитулом (всегда видимым).

У меня есть 2 проблемы, которые я пытался решить всеми способами:

1) Обертка (высота 100%) работает нормально, пока вы не прокрутите страницу, но не расширяется после прокрутки (см. прикрепленное изображение, страница прокручивается вниз).

2) содержимое внизу находится под нижним колонтитулом, я не смог найти способ применения отступа -30, чтобы сделать читабельную заключительную частьсодержимое (я думаю, что это связано с проблемой № 1).

Вот CSS (также использованный reset.css, основанный на сбросе YUI): 

  /* 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;


}

И HTML:

(голова опущена) 

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

На всякий случай я приложил изображение с объяснением.

Just in case, I attached an image with an explanation.

Спасибо за помощь!

Ответы [ 3 ]

2 голосов
/ 13 апреля 2011 
#navigation{
    position: fixed;
    overflow:hidden;
    width: 200px;
    left: 40px; /* add this */
}

#content{

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

ваша страница не имеет контента .. ну, она думает, что нет;)

, так что удалите абсолютное позиционирование из содержимого .. пусть содержимое остается в потоке, это должно означать, что существующий min-height на обертке действительно получает возможность работать (в тот момент, когда он думает, что в нем ничего нет, поэтому не может расти)

, который тогда, кажется, работает, но IE7 становится немного привередливым, как он делает и перемещает nav по контенту - так что просто явно (дайте tsk и) скажите ему, где вы хотите, чтобы это было (помогите ему сосчитать! ) и добавьте левую позицию на #navigation

0 голосов
/ 13 апреля 2011

Вы пытались использовать min-height: 100% вместо height: 100% для вашего тела и html стилей?

0 голосов
/ 13 апреля 2011

Что касается обертки, сними 100% высоты.По умолчанию будет установлено автоматическое увеличение по высоте и расширение до содержимого.

Для содержимого под нижним колонтитулом просто примените нижний отступ к содержимому и снимите абсолютное позиционирование.Просто поместите левое поле (и, возможно, поплавок).

...