html 100% 高度和 200px 底边距？答案

【问题标题】：html 100% height with 200px bottom margin?html 100% 高度和 200px 底边距？
【发布时间】：2011-05-03 08:21:21
【问题描述】：

请有才华的人帮我解决这个页面布局或告诉我是否可行？

尝试嵌入一些随浏览器调整大小但左侧有 400 像素边距和底部有 200 像素边距的 Flash 内容。已设法获得左侧边距，但无法使底部边距留在浏览器内。

我的 div 看起来像这样：

<div style="height:100%;margin-left:400px;">
    <div id="flashcontent"></div>
</div>

swf 与 swfobject 一起动态嵌入到 flashcontent div 中，如果有任何帮助，我们将不胜感激。

迈克

【问题讨论】：

尝试浮动 div 看看会发生什么
您好，感谢您的回复，尝试将浮动添加到 div 但现在 Flash 内容很小（大约 100px X 100px）并且底部没有边距。有什么想法吗？

标签： html css height margin

【解决方案1】：

<!-- This comment makes IE render in quirks mode.. We want IE in quirks mode -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Untitled</title>
<style type="text/css">
html,body {
    margin:0;
    padding:0;
    height:100%;
}
.flash-container {
    height:100%;
    background-color: #f00;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:0 0 200px 400px;
}
.flash {
    background-color: #fff;
    width:100%;
    height:100%;
}
</style>
</head>
<body>
<div class="flash-container">
    <div class="flash">
        ...Replace this Div with Flash
    </div>
</div>
</body>
</html>

【讨论】：

非常感谢，这是一个很棒的解决方案

【解决方案2】：

Pekkas 的回答非常好，我没有考虑设置所有边缘的选项。但我也提出了这个表格提案，它应该适用于从一开始的所有浏览器。

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;"> 
<body style="padding:0;margin:0;height:100%;">
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
    <td style="width:400px;">1</td>
    <td style="background-color:red;">2</td>
</tr>
<tr style="height:200px;">
    <td>3</td>
    <td>4</td>
</tr>
</table>
</body>
</html>

【讨论】：

嗨 Svend，感谢您的回复，但主要内容是嵌入的 swf，尝试了您的代码，但在 IE8 中，底部超出了浏览器，而在 Chrome 中，底部很好，但它压缩了 swf。有任何想法吗？迈克
呃！使用表格进行布局就像每天在麦当劳吃饭一样：它在短时间内确实有效，但最终你会死于脂肪。
@xPheRe 知道它是什么，它仍然是一个强大的工具，如果 CSS 没有为您提供好的解决方案，或者需要非常前沿的东西，那么您可以依赖它，那可能不是可用。知道麦当劳是什么并没有错，并且每年在那里吃一次汉堡可能;）

【解决方案3】：

如果你负担得起不支持 IE6，我想你可以使用position: fixed。

它不是很优雅，但从它的声音来看（您似乎在此页面上没有任何其他布局注意事项需要注意），它可能会。

<div style="position: fixed; left: 400px; top: 0px; right: 0px; bottom: 200px;">
    <div id="flashcontent"></div>
</div>

我现在无法对此进行测试，但 flashcontent div 现在应该能够根据外围 div 调整大小。

【讨论】：

哇，太棒了，这让我发疯了，你知道 IE6 的任何解决方法吗？愿意在你的愿望清单上得到一些东西。无论哪种方式都非常感谢
@mike mmm，你可以试试position: absolute 而不是fixed。这也应该有效，只要您的 html 和 body 元素是 100% 高，并且文档不会超出底部边框（即正好是 100% 高）。如果不成功，请提供反馈。从我的愿望清单中得到一些东西完全是自愿的，但总是受欢迎的！ :)
将测试 IE6，但非常感谢您，会及时通知您。干杯