我有一个问题是我的一个元素100%在100%的整体布局中.
我尝试了不同的定位解决方案,我最终得到隐藏的内容,底部的页脚后面的浮动,或内容最终在页脚后面,并在页脚后继续.
这是我对页面布局的看法.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<style>
*{margin:0}
html,body{margin:0; padding:0; height:100%}
.wrapper{position:relative; margin:0 auto -200px; height:auto !important; height:100%; min-height:100%}
.container{width:930px; margin:0 auto; text-align:left}
.right{float:right; width:680px; background:#FFF; margin:60px 10px 0 0; padding:0}
.left{float:left; width:240px}
.content{padding:10px}
.footer{position:absolute; width:100%}
.footer,.push{height:200px}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div id="left">
left
</div>
<div class="right">
<div class="content">
content
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
页面布局为100%高度和页脚底部的布局使其只是具有类名称内容的div,我希望100%也是如此,如果内容到达页脚而不是消失,则将页脚向下推进.
任何帮助最受赞赏.
AMi*_*sin 12
回答animuson:实际上IE6支持需要以下代码:
min-height: 100%; /* real browsers */
height: auto !important; /* real browsers */
height: 100%; /* IE6: treated as min-height*/
IE6不明白!important,但它确实将高度视为最小高度.因此,要支持IE6和现代浏览器,您必须使用完全相同的代码(顺序很重要).
正确的CSS应如下所示:
<style type="text/css" media="screen">
html,body
{
margin:0; padding:0; height:100%;
}
.wrapper
{
position:relative;
min-height:100%;
/*background: #fef;*/
}
.container
{
margin: 0 auto;
width: 930px;
padding: 0 0 200px 0; /*200 pixels at the bottom, to stay over the footer*/
/*background: #fff; */
}
.left /* This was one cause. Old line: <div id="left">, new line: <div class="left"> */
{
float: left;
width: 240px;
/*background: #efe;*/
}
.right
{
float: left;
width: 690px;
/*background: #efa;*/
}
.right .content
{
padding: 10px;
}
.clear
{
clear: both;
}
.footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
/*background: #eff;*/
}
</style>
我相信这会对你有所帮助.
<div class="wrapper">
<div class="container">
<div class="left">
left
</div>
<div class="right">
<div class="content">
content
</div>
</div>
<div class="clear"></div>
</div>
<div class="footer">
footer
</div>
</div>
这看起来像你想拥有它.页脚位于底部,每次都像你想要的那样:)希望它有所帮助!
在您的代码中，页脚有position:absolute，但未给出实际位置（例如bottom: 30px;）。另外，如果您希望 .content 或 .push 影响 .footer 位置，它们必须位于同一流中（例如，两者的位置：静态；）。给予页脚位置：绝对根据定义采用正常流程中的页脚定位，因此这与目标不兼容。
我假设您想要做的是获得一个 100% 的页面，即使内容很少，并且页脚始终位于页面/屏幕的底部。
FooterStickAlt 是实现这一目标的一个很好的跨浏览器解决方案。 http://www.themaninblue.com/experiment/footerStickAlt/