html 100% 高度和 200px 下边距？

发布于 2024-09-30 05:55:42 字数 356 浏览 3 评论 0原文

请一些聪明的人帮我设计这个页面布局或者告诉我是否可能？

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

我的 div 看起来像这样：

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

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

麦克风

原文

please can some brilliant person help me with this page layout or tell me if it is possible?

Trying to embed some flash content which resizes with the browser but has a 400px margin on the left and a 200px margin at the bottom. Have managed to get the margin on the left but cannot get the bottom margin to stay within the browser.

My div looks like this:

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

The swf is embedded with swfobject into the flashcontent div dynamically, Any help with this would be greatly appreciated.

Mike

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柒夜笙歌凉 2024-10-07 05:55:42

如果您可以承受不支持 IE6 的后果，我想您可以使用 position:fixed。

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

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

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

If you can afford not to support IE6, I guess you could work with position: fixed.

It's not very elegant but from the sound of it (you don't seem to have any other layout considerations to take care of on this page), it might do.

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

I can't test this right now, but the flashcontent div should now be able to resize according to the outlying div.

回复收藏 0 原文

找回味觉 2024-10-07 05:55:42

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

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

回复收藏 0 原文

迷乱花海 2024-10-07 05:55:42

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>

Pekkas answer is pretty good, I didn't consider the option of setting all edges. But I also made this table proposal, which should work in just about all browsers since the dawn of time.

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

回复收藏 0 原文

~没有更多了~