gpt4 book ai didi

CSS 高度 100% 带边距

转载 作者:行者123 更新时间:2023-11-28 18:23:25 40 4
gpt4 key购买 nike

我正在尝试显示一个与浏览器窗口具有相同高度的 div,但在顶部使用 200 像素的边距。所以,起初我尝试了 height: 100%;但这不能很好地处理边距,因为 div 比浏览器窗口大。

然后我试了一下:

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

正如您在此处看到的那样,效果非常好:http://jsfiddle.net/fB9ea/1/

问题是:如果文本太多以至于它变得比 div 大,那么文本就会从 div 中伸出来,如您在此处看到的:http://jsfiddle.net/fB9ea/

我该如何解决这个问题?

最佳答案

让 100% 的高度正常工作对于跨浏览器来说是很棘手的——你必须在最外层的元素上做到这一点。我的建议是尝试类似下面的代码,其中 #wrap div 设置为浏览器窗口的 100% 高度并包含一个 .top 200px 高的 div与主体元素相同的背景颜色:

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

关于CSS 高度 100% 带边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16334747/

40 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com