Question

请一位有才华的人帮我处理这个页面布局，或者告诉我是否有可能吗？

尝试嵌入一些闪存内容，这些内容随浏览器调整大小但左边有400px的边距，底部有200px的边距。设法获得了左边的边距，但无法让底部边距留在浏览器中。

我的div看起来像这样：

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

swf与swfobject动态嵌入到flashcontent div中，非常感谢任何帮助。

麦克

Answer 1

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

它不是很优雅，但从它的声音（你似乎没有任何其他布局考虑因素来处理这个页面），它可能会这样做。

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

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

Answer 2

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

Answer 3

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>

html 100％高度，底部边距为200px？

3 个答案: