position：absolute，div div div

我有3个div，每个div都有position: absolute。position：absolute，div div div

首先是标题，它的工作。

标题具有不变的高度，第二个div“content”也起作用。

第三格是“页脚”。

“内容”具有可变的高度，当“内容”高于网页浏览器窗口时，“页脚”为ON“内容”。无论内容的高度如何，我都想在“内容”下面“脚注”。

我的标题为300px高度，内容为margin-top: 300px。我不能在页脚上使用相同的内容，因为内容的高度并不一致。

我不想设置一个div与position: absolute，并且这3个div位于这个里面。

div#header{ 
    width: 960px; 
    height: 200px; 
    left: 50%; 
    margin-left: -480px; 
    position: absolute; 
} 

div#content{ 
width: 960px; 
border: 1px solid black; 
left: 50%; 
margin-left: -480px; 
position: absolute; 
margin-top: 200px; 
} 

div#footer{ 
    width: 960px; 
    height: 30px; 
    left: 50%; 
    margin-left: -480px; 
    position: absolute; 
    bottom: 10px; /*with this i've div fixed to the bottom of web-browsers' window */ 
    clear: both; 
    }

来源

2011-12-16 aptyp

能否请您示例代码添加到这个问题？ – andyb 2011-12-16 08:00:27

你也可以在这里创建“小提琴”：http://jsfiddle.net/例如。 – span 2011-12-16 08:04:20

http://paste.org/42377 – aptyp 2011-12-16 08:14:18

我会建议使用CSS花车

做这样的事情：

<div id="wrapper"> 
    <div id="header">...</div> 
    <div id="content">...</div> 
    <div id="footer">...</div> 
    <div class="clear"></div> 
</div>

设置在包装现场宽度和让其他的div具有相同的宽度。

使用浮动：既上明确DIV：在标题，内容和页脚

设置清晰离开。

现在您可以设置要固定高度的元素的高度 - 而且您不必担心绝对定位。如果您坚持使用定位，则可以只定位包装。

来源

2011-12-16 08:04:31 Jach0

你已经过了定位。

除非你有什么不共享的东西，否则你不需要完全放置所有东西。

JSBin Example

来源

2011-12-16 08:07:59 Scott

如果您愿意使用position : relative这是在这样的情况下比position : absolute防抖，http://jsfiddle.net/vFTXg/1/ - 尝试在这里编辑内容的高度值和页脚将自动调整。

CSS

.header { 
    position : relative; 
    width : 100%; 
    height : 90px; 
    background-color : #000; 
} 
.content{ 
    position:relative; 
    width : 100%; 
    min-height : 200px; 
    background-color : #f00; 
} 
.footer{ 
    position:relative; 
    width : 100%; 
    height : 50px; 
    background-color : #0f0; 
}

HTML

<div class='header'></div> 
<div class='content'></div> 
<div class='footer'></div>

来源

2011-12-16 08:19:02

在未来的浏览器可以计算。对于你的例子，如果内容高度较低，可以计算内容的最小高度以将底层设置为底部，并且如果底部具有高度值，则将底部设置为底部。例如。：

HTML：

<div id="header" class="content">header</div> 
<div id="content" class="content">content</div> 
<div id="footer" class="content">footer</div>

CSS：

html, body { 
    height: 100%; 
} 
.content { 
    position: relative; 
    width: 960px; 
} 
#header { 
    height: 200px; 
} 
#content { 
    border: 1px solid black; 
    min-height: -moz-calc(100% - 302px); 
    min-height: -webkit-calc(100% - 302px); 
    min-height: calc(100% - 302px); 
} 
#footer { 
    height: 100px; 
}

不幸的是只有Firefox和IE9和目前较高的支持calc，所以这是理论上更。如果你想测试它，请看jsfiddle。
如果你想用所有当前的浏览器做到这一点，你需要使用JavaScript。

来源

2011-12-16 08:46:41 scessor

如果你想要的东西是恒定的宽度和中心试试这个

#footer, 
#header, 
#footer { 
    width: 960px; 
    margin: 0 auto; 
}

，忘记

left: 50%; 
margin-left: -480px; 
position: absolute;

来源

2011-12-16 10:17:05 HerrSerker

position：absolute，div div div

回答

相关问题