【问题标题】: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。这也应该有效,只要您的 htmlbody 元素是 100% 高,并且文档不会超出底部边框(即正好是 100% 高)。如果不成功,请提供反馈。从我的愿望清单中得到一些东西完全是自愿的,但总是受欢迎的! :)
  • 将测试 IE6,但非常感谢您,会及时通知您。干杯