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底部邊距？

回答

相關問題