HTML 100％的高度与200px底部边距？

请问一些聪明人可以帮我解决这个页面布局问题还是告诉我是否有可能？HTML 100％的高度与200px底部边距？

试图嵌入一些Flash内容与浏览器调整大小，但对左侧400像素保证金，并在底部的200像素的余量。已设法获得左侧的保证金，但无法将底部保证金保留在浏览器中。

我的格是这样的：

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

SWF文件中嵌入了SWFObject的入flashcontent DIV动态，任何帮助，将不胜感激。

迈克

来源

2010-11-01 mike

尝试浮动DIV，看看会发生什么 – ArK 2010-11-01 10:11:59

您好，感谢您的答复，试图将漂浮到div但现在的Flash内容很小（大约100像素X 100像素），并在底部没有保证金。有任何想法吗？ – mike 2010-11-01 10:59:32

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

这不是很优雅，但由它的声音（你似乎没有任何其他布局的考虑照顾这个页面上），它可能会做。

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

我现在不能测试此权利，但flashcontent DIV现在应该能够根据边远div来调整。

来源

2010-11-01 13:09:26

哇，多数民众赞成在这一直让我生气，你知道任何IE6的解决方法吗？愿意在你的愿望清单上获得一些东西。非常感谢 – mike 2010-11-01 13:18:10

@mike mmm，你可以尝试'position：absolute'而不是'fixed'。只要你的'html'和'body'元素的高度为100％，并且文档不会伸展超出底部边界（即完全是100％高），那也应该起作用。如果不能解决问题，请提供反馈。从我的愿望清单中找到我完全是自愿的，但始终欢迎！ :) – 2010-11-01 13:23:05

将测试IE6，但不能够感谢你足够，将保持你张贴。干杯 – mike 2010-11-01 13:35:47

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>

来源

2010-11-01 13:22:41 Svend

嗨Svend，谢谢你的回应，但主要内容是一个嵌入式瑞士法郎，试过你的代码，但在IE8底部去了浏览器之外，在Chrome浏览器底部是好的，但它压缩瑞士法郎。有任何想法吗？迈克 – mike 2010-11-01 13:34:45

呃！使用表格进行布局就像每天在麦当劳吃东西：它确实在短时间内工作，但最终死于涂脂肪。 – xPheRe 2010-11-01 13:36:00

@xPheRe知道它是什么，仍然是一个强大的工具，如果CSS不能为你提供一个好的解决方案，或者需要非常流血的东西，那么可能会失败。知道麦当劳是什么并没有错，并且每年在那里吃汉堡也许;） – Svend 2010-11-03 08:58:47

<!-- 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>

来源

2010-11-01 13:36:59

非常感谢，这是一个很棒的解决方案 – mike 2010-11-01 13:59:05

HTML 100％的高度与200px底部边距？

回答

相关问题