Question

我知道，这个话题已经打开了1000次，但我找不到合适的解决方案（或者我能理解的解决方案）。

我有一个简单的页面（wordpress），左侧是固定的导航菜单，中间是可滚动的内容，是一个固定的页脚（始终可见）。

我有两个问题，我试图以各种方式解决：

1）包装器（100％高度）包装正常，直到您滚动页面，但在滚动后不会延伸（参见附图，页面滚动到底部）。

2）底部的内容在页脚下，我找不到一种方法来应用-30填充以使内容的最后部分可读（我认为这与问题1相关）。

这是CSS（也使用了基于YUI重置的reset.css）：

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

感谢您的帮助！

Answer 1

#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

上添加左侧位置

Answer 2

您是否尝试在身体和html样式上使用min-height: 100%代替height: 100%？

Answer 3

至于包装纸，取下100％的高度。它将默认为自动高度并扩展为内容。

对于页脚下的内容，您只需对内容应用底部填充，然后取消绝对定位。只需在其上放一个左边距（可能还有浮动）。

包装纸100％高度，固定页脚和固定菜单

3 个答案: