帶邊距的CSS高度100％

我想顯示一個與瀏覽器窗口高度相同的div，但在頂部使用200px的邊距。所以，起初我嘗試了身高：100％;但由於div比瀏覽器窗口大，所以這不能很好地處理邊距。帶邊距的CSS高度100％

然後我試過了：

div { 
    background: red; 
    position: absolute; 
    top: 20px; 
    bottom: 0; 
    height: auto; 
}

這工作得很好，你可以在這裏看到：http://jsfiddle.net/fB9ea/1/

的問題是：如果有這麼多的文本，它變得比格越大，文字伸出div，如你所見：http://jsfiddle.net/fB9ea/

我該如何解決這個問題？

來源

2013-05-02 charihans

不知道正是你需要的，但在這裏它可能造成的位置是：絕對的; – 2013-05-02 09:40:11

確定它是由絕對位置引起的。這正是我的問題：我想要一個與頁面高度完全相同的div（具有頂部邊距），但當文本中有更多文本時它應該變大。 – charihans 2013-05-02 09:52:12

要獲得100％的工作高度對於跨瀏覽器來說是非常棘手的 - 而且您必須在最外面的元素上進行操作。我的建議是嘗試像下面的代碼，其中#wrap格設置爲瀏覽器窗口的100％的高度，幷包含一個.top格爲200px高大使用相同的背景色爲主體元素：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
html, body { 
    height:100%; 
} 

html,body { 
    margin:0;padding:0; 
} 

#wrap { 
    min-height:100%; 
    background: red; 
    width: 50%; 
    margin: 0 auto; 
} 

* html #wrap {height:100%;} 

.top { 
    height: 200px; 
    background: white; 
} 

</style> 
</head> 
<body> 
<div id="wrap"> 
    <div class="top"> 
    </div> 
    Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br /> 
</div> 
</body> 
</html>

來源

2013-05-02 10:00:36

謝謝！這是該線程中唯一涵蓋兩種場景（少量文本，很多文本）的解決方案！ – charihans 2013-05-02 10:14:56

不客氣。很高興這有幫助。 – 2013-05-02 10:18:49

因爲.div檢查的絕對位置這撥弄它：

here

我改成了相對的增加了寬度它。

// //編輯

的jsfiddle here

這可以通過最小高度和最大高度來完成

// // EDIT2

enter link description here給包裝也min-max height

w3school explenation positions

來源

2013-05-02 09:41:14 DiederikEEn

那就對了。但是這裏的問題是，當文本很少時，div的高度與網站的高度不一樣：http://jsfiddle.net/fB9ea/3/ – charihans 2013-05-02 09:48:58

這可以通過min-height和max-height來完成更新的awnser！ – DiederikEEn 2013-05-02 09:52:28

不，不工作：http://jsfiddle.net/fB9ea/6/ – charihans 2013-05-02 10:06:11

如何使用

overflow: scroll;

這將滾動條添加到div時文字變得太大，我猜是你追求的。

來源

2013-05-02 09:42:13 Christina

不，我想要一個與網站高度完全一樣的div，但是當文本中有更多文本時它應該變大。 – charihans 2013-05-02 09:49:38

您可以使用min-height輕鬆修復此問題。這將確保你的div至少是頁面高度的100％，但是當文本更多時它會增長。您的代碼看起來就像這樣：

div { 
    background: red; 
    position: absolute; 
    top: 20px; 
    min-height: 100%; 
    height: auto; 
}

http://jsfiddle.net/dakoder/JHjkJ/

來源

2013-05-02 10:13:20 DaKoder

不工作：看看這裏：http://jsfiddle.net/JHjkJ/1/ div現在是100％+ 20px的高度。 – charihans 2013-05-02 10:14:38

帶邊距的CSS高度100％

回答

相關問題