CSS高度100%带边距_Css_Height_Margin

CSS高度100%带边距

css

CSS高度100%带边距,css,height,margin,Css,Height,Margin,我试图显示一个与浏览器窗口高度相同的div，但在顶部使用200px的边距。所以，一开始我试着用身高：100%；但这在有余量的情况下效果并不好，因为div比浏览器窗口大然后我试着： div { background: red; position: absolute; top: 20px; bottom: 0; height: auto; } 正如你在这里看到的那样，这很有效：问题是：如果有太多的文本，它变得比div大，那么文本就会从div中伸出，正如您在这里看到的：如何

我试图显示一个与浏览器窗口高度相同的div，但在顶部使用200px的边距。所以，一开始我试着用身高：100%；但这在有余量的情况下效果并不好，因为div比浏览器窗口大

然后我试着：

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

正如你在这里看到的那样，这很有效：

问题是：如果有太多的文本，它变得比div大，那么文本就会从div中伸出，正如您在这里看到的：

如何解决该问题？

这是因为

.div

的绝对位置检查此小提琴：

我将其更改为相对，并为其添加了一个宽度

//编辑//

JSFIDLE

这可以通过最小高度和最大高度来实现

//编辑2//

给包装纸一个最小最大高度

这是因为

.div

的绝对位置，请检查此小提琴：

我将其更改为相对，并为其添加了一个宽度

//编辑//

JSFIDLE

这可以通过最小高度和最大高度来实现

//编辑2//

给包装纸一个最小最大高度

使用

overflow: scroll;

当文本变得太大时，这将在div中添加一个滚动条，我猜这就是您想要的

overflow: scroll;

当文本变得太大时，这将在div中添加一个滚动条，我猜这就是您所追求的。

获得100%的高度很难正确地跨浏览器，您必须在最外层的元素上执行。我的建议是尝试下面的代码，其中

#wrap

div设置为浏览器窗口的100%高度，并包含一个

.top

div 200px高，背景颜色与body元素相同：

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


html，正文{
身高：100%；
} 
html，正文{
边距：0；填充：0；
}
#包裹{
最小高度：100%；
背景：红色；
宽度：50%；
保证金：0自动；
}
*html#wrap{高度：100%；}
.顶{
高度：200px；
背景：白色；
}
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
/>

要获得100%的工作高度，跨浏览器操作是很困难的，您必须在最外层的元素上进行操作。我的建议是尝试下面的代码，其中

#wrap

div设置为浏览器窗口的100%高度，并包含一个

.top

div 200px高，背景颜色与body元素相同：

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


html，正文{
身高：100%；
} 
html，正文{
边距：0；填充：0；
}
#包裹{
最小高度：100%；
背景：红色；
宽度：50%；
保证金：0自动；
}
*html#wrap{高度：100%；}
.顶{
高度：200px；
背景：白色；
}
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
/>

您可以使用

最小高度

轻松解决此问题。这将确保您的div至少是页面高度的100%，但当有更多文本时，div会增加。您的代码如下所示：

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

您可以使用

最小高度

轻松解决此问题。这将确保您的div至少是页面高度的100%，但当有更多文本时，div会增加。您的代码如下所示：

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

不确定您到底需要什么，但这里可能是位置导致的：绝对；当然，这是由绝对位置引起的。这正是我的问题：我想要一个与页面高度完全相同的div（顶部留有边距），但当其中有更多文本时，它应该会变大；当然，这是由绝对位置引起的。这正是我的问题：我想要一个与页面高度完全相同的div（在顶部留有边距），但当其中有更多文本时，它应该会变大。没错。但这里的问题是，当文本很少时，div get的高度与站点的高度并不完全相同：这可以通过使用最小高度和最大高度来完成，请参见更新的awnser@查理汉斯再检查一遍。我给了包装纸一个最小最大高度，没错。但这里的问题是，当文本很少时，div get的高度与站点的高度并不完全相同：这可以通过使用最小高度和最大高度来完成，请参见更新的awnser@查理汉斯再检查一遍。我给了包装器一个最小最大高度不，我想要一个和网站一样高的div，但是当它有更多的文本时，它会变大。不，我想要一个和网站一样高的div，但是当有更多的文本时，它应该会变大。不工作：看这里：div现在是100%+20px高度。不工作：看这里：div现在是100%+20px高度。谢谢！这是该线程中涵盖这两种场景（少文本，多文本）的唯一解决方案！非常感谢。这是该线程中涵盖这两种场景（少文本，多文本）的唯一解决方案！