问题描述
|
我知道，这个主题已经被打开了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;
}
<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> </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,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,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>
解决方法
#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
nav
#navigation
min-height: 100%
height: 100%