Wrapper 100% 高度，固定页脚和固定菜单
Posted
技术标签:
【中文标题】Wrapper 100% 高度，固定页脚和固定菜单【英文标题】：Wrapper 100% height, fixed footer and fixed menu 【发布时间】：2011-08-04 05:02:36 【问题描述】：我知道，这个话题已经打开了1000次，但是我没有找到合适的解决方案（或者我能理解的解决方案）。
我有一个简单的页面（wordpress），左侧有一个固定的导航菜单，中间是可滚动的内容和一个固定的页脚（始终可见）。
我有 2 个问题我已经尝试以各种方式解决：
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> </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> </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> </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>
为了以防万一，我附上了一张带有解释的图片。
感谢您的帮助！
【问题讨论】：
【参考方案1】：至于包装纸，去掉 100% 的高度。它将默认为自动高度并扩展到内容。
对于页脚下的内容，您只需对内容应用底部填充，然后取消绝对定位。只需在其上放置一个左边距（也可能是一个浮点数）。
【讨论】：
【参考方案2】：您是否尝试过在 body 和 html 样式中使用 min-height: 100% 而不是 height: 100%？
【讨论】：
【参考方案3】：#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上添加左侧位置
【讨论】：
它起作用了......真是头疼，它在我的眼睛下面（像往常一样！）非常感谢！ 不客气.. 我忘了提到#2 - 但我认为你是对的，它可能是相关的，因为我没有看到它 - 它也修复了吗？ 出现了一个新问题...如果内容比浏览器窗口短，就会出现原来的问题，wrapper 不再是 100%。有什么想法吗？ 解决了...我的错误。身高 100% 丢失。再次感谢。以上是关于Wrapper 100% 高度，固定页脚和固定菜单的主要内容，如果未能解决你的问题，请参考以下文章