CSS - 身高：100％vs最小身高：100％;

所以在我的代码中，我有一个粘性的页脚。而粘脚则有min-height为100%的#wrap容器。但min-height不能在包装div内的对象上使用height:100%。CSS - 身高：100％vs最小身高：100％;

所以我加了height:100%，但是当窗口高度太小时，通过使页脚在包装div中的内容滚动而与布局混乱。

任何人都有此修复？

<div id="wrap"> 
    <div id="main"> 
     <div id="content"> 

     </div> 
    </div> 
    <div class="clearfooter"></div> 
</div> 
<div id="footer"> 

</div>

CSS：

*{ 
    padding: 0px; 
    margin: 0px; 
} 
html, body { 
    height: 100%; 
} 
body{ 
    color: #FFF; 
    background-image:url('../images/black_denim.png'); 
} 
#wrap { 
    min-height: 100%; 
    margin-bottom: -200px; 
    position: relative; 
} 
#topBanner{ 
    width: 200px; 
    margin: 0px auto; 
} 
.clearfooter { 
    height: 200px; 
    clear: both; 
} 
/* footer */ 
#footer { 
    position: relative; 
    height: 200px; 
    width: 100%; 
    min-width: 960px; 
}

来源

2012-12-22 Zach Case

我也知道你可以做'位置：绝对;顶部：0;底部：0;'来获得效果，但是，因为它是绝对的，页脚将会像内容那样行事，如果它也是不存在的话小。 –

如果你需要的是一个棘手的注脚，不掩盖任何身体的内容，然后只给页脚固定位置，而给身体的底部填充等于页脚高度。

body{ 
    padding-bottom:200px; 
} 

#footer { 
    position: fixed; 
    bottom:0; 
    height: 200px; 
    width: 100%; 
}

编辑：

如果你关注的是，在非常小的屏幕固定页脚涵盖了大部分的屏幕则是除了可能使用动态CSS媒体查询或隐藏页脚没有解决此JavaScript的。

许多移动浏览器并不支持固定位置，因为它们覆盖了大部分屏幕。

来源

2012-12-22 21:44:19

这样做不起作用，因为您仍然可以将窗口设置得足够小以覆盖它。 –

即使修改了'fixed'，它也不起作用。你不了解我的问题。我发布的代码在将脚注停在任何内容之前停止工作。但是，由于'min-height：100％;'，代码不允许'wrapper：100％;'在包装内部。但是，如果没有'min-height'这个代码是行不通的，那是我的问题。 –

你说得对，我不明白这个问题。如果你可以发布一个链接到一个更完整的例子与内容，那么我可能会更好地使用。 –

CSS - 身高：100％vs最小身高：100％;

回答

相关问题