固定底邊距

我有一個頁面是這樣的：固定底邊距

<html> 
<head> 
<style type="text/css"> 
    #mainDiv{ 
    height: 100%; 
    } 

    #myDiv{ 
    overflow: auto; 
    width: 400px; 
    } 
</style> 
</head> 
<body> 
    <div id="mainDiv"> 
    <div id="myDiv">content</div> 
    </div> 
</body> 
</html>

我希望mainDiv完全包含在屏幕（沒有滾動條）。此div包含myDiv和myDiv高度取決於屏幕高度，使其底部邊框與屏幕底部之間的距離爲30px（或底部爲mainDiv）。我能做什麼？

來源

2012-03-23 supergiox

像@Johno建議的解決方案應該是

#mainDiv { width: 100%; height: 100%; padding-bottom: 30px; } 
#mydiv { width: 100%; height: 100%; }

但是當你嘗試這種解決方案，你得到一個滾動條，因爲內容的高度比窗口更大。

你得到這個是因爲我認爲邊距被加到了內容的高度（即100％）。因此，評價規則的順序是：

設置內容高度爲100％
30像素的邊框添加到當前高度。

我試圖設置一個固定高度的內容，即窗口高度減去30像素，我得到了正確的結果。

來源

2012-03-24 18:44:32 PinoSan

是的，我也想。但我不能在px中使用固定高度，根據我的窗口大小計算。我希望'100％-30px'這樣的東西在任何屏幕上都會有一個30px的邊框，但不幸的是css不接受這種措施。 – supergiox 2012-03-25 02:43:29

我發現了一個重複的問題。這裏你是一個正確的答案。 http://stackoverflow.com/a/485887/680740。我試過了，我想這就是你要找的。 – PinoSan 2012-03-25 11:28:00

我沒有找到這個答案，它完美的作品。非常感謝你！ – supergiox 2012-03-25 12:01:50

#mainDiv { 
    width: 100%; 
    height: 100%; 
} 
#mydiv { 
    width: 100%; 
    height: 100%; 
    margin-bottom: 30px; 
}

HTML

<div id="mainDiv"> 
     <div id="mydiv">content</div> 
    </div>

來源

2012-03-23 15:44:26 SMacFadyen

它不工作......用這種方法我沒有保證金 – supergiox 2012-03-23 15:52:48

你可以嘗試：

#mainDiv { width: 100%; height: 100%; padding-bottom: 30px; } 
#mydiv { width: 100%; height: 100%; }

的#mainDiv的填充應該給，你希望在#mydiv的有效保證金。

爲了確保沒有滾動條，您可能還需要從body中刪除填充等。

來源

2012-03-23 15:45:24 Johno

有了這段代碼，我在屏幕底部有一個30px的邊緣，所以有滾動條...你能再解釋一下你的建議嗎？？ – supergiox 2012-03-23 15:56:00

回答

相關問題