带边距的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％

回答

相关问题