html 100%高度，底部空白200px？_Html_Css_Height_Margin

html 100%高度，底部空白200px？

html css

html 100%高度，底部空白200px？,html,css,height,margin,Html,Css,Height,Margin,请找一位才华横溢的人来帮我做这个页面布局，或者告诉我是否可行尝试嵌入一些flash内容，这些内容可以随浏览器调整大小，但左侧的边距为400px，底部的边距为200px。已成功获取左侧的边距，但无法将底部边距保留在浏览器中我的div看起来像这样： <div style="height:100%;margin-left:400px;"> <div id="flashcontent"></div> </div> swf与swfobjec

请找一位才华横溢的人来帮我做这个页面布局，或者告诉我是否可行

尝试嵌入一些flash内容，这些内容可以随浏览器调整大小，但左侧的边距为400px，底部的边距为200px。已成功获取左侧的边距，但无法将底部边距保留在浏览器中

我的div看起来像这样：

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

swf与swfobject一起动态嵌入到flashcontent div中，对此的任何帮助都将不胜感激

Mike

如果你负担得起不支持IE6的费用，我想你可以使用

位置：fixed

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

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

我现在不能测试这个，但是<代码> Flash内容 div现在应该能够根据边长div来调整大小。

< pkkas回答很好，我没有考虑设置所有边的选项。但我也提出了这个表格建议，它应该可以在所有浏览器中使用

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


1.
2.
3.
4.


无标题
html，正文{
保证金：0；
填充：0；
身高：100%；
}
.闪存容器{
身高：100%；
背景色：#f00；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
填充：0 0 200px 400px；
}
.闪光{
背景色：#fff；
宽度：100%；
身高：100%；
}
…用闪存替换此Div

尝试浮动div，看看会发生什么。感谢您的回复，我尝试将浮动添加到div中，但现在flash内容很小（约100px 100px），底部没有边距。有什么想法吗？哇，太棒了这让我抓狂了，你知道IE6有什么解决办法吗？愿意从你的愿望清单上得到一些东西。也非常感谢way@mike嗯，你可以试试

position:absolute

而不是

fixed

。只要

html

和

body

元素的高度为100%，并且文档没有超出底部边界（即，正好为100%高），那么这也应该是可行的。如果不起作用，给出反馈。从我的愿望清单上给我一些东西完全是自愿的，但总是欢迎的！：）将测试IE6，但非常感谢您，将随时通知您。Cheers Shi Svend，感谢您的回复，但主要内容是嵌入式swf，尝试了您的代码，但在IE8中，底部超出了浏览器，在Chrome中，底部很好，但它压扁了swf。有什么想法吗？米凯！使用表格进行布局就像每天在麦当劳吃饭：它在短期内确实有效，但最终你会被脂肪包裹而死。@xPheRe知道它是什么，仍然是一个强大的工具，如果CSS不能为你提供一个好的解决方案，或者需要非常前沿的东西，你可以依靠它，而这些东西可能是不可用的。知道麦当劳是什么没什么错，也许每年在那里吃一次汉堡；）非常感谢，这是一个很棒的解决方案

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