gpt4 book ai didi

html - 如何在 div 和 body 底部之间留一些空间?

转载 作者:太空宇宙 更新时间:2023-11-03 21:49:55 29 4
gpt4 key购买 nike

您好,我想在我的 body 中间放置一个 div。此 div 的最小高度为 400px,但此 div 的大小可能会随着内容的增加而增加。当我向这个 div 中添加更多内容时,它变得很好,但它也开始触及 div 的底部。

我想在 div 和底部之间有一个最小空间,这样如果 div 的大小增加,至少在 body 和 div 之间保留那么多空间。

我的HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TODO-List</title>
<link rel="stylesheet" href="StyleSheet.css">
</head>
<body>
<div class="container">
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
This is sample content<br />
</div>
</body>
</html>

我的CSS

.container
{
/*display*/
margin: 0px;
padding: 0px;
min-height: 400px;
width: 40%;

/*Border*/
border: 2px solid Grey;
border-radius: 5px;
box-shadow: 0px 0px 2px 2px Grey;
-moz-box-shadow: 0px 0px 2px 2px Grey;
-webkit-box-shadow: 0px 0px 2px 2px Grey;

/*Position*/
position: absolute;
left: 30%;
top: 270px;
}

Here is my code on jsFiddle

最佳答案

不要使用绝对定位,因为 body 的高度为 0px。在您的情况下,margin 是最佳选择。

更新:现在支持自动居中,因此您可以根据需要更改大小,而无需更改 margin

.container
{
/*display*/
margin: 270px auto;
padding: 0px;
min-height: 400px;
width: 40%;

/*Border*/
border: 2px solid Grey;
border-radius: 5px;
box-shadow: 0px 0px 2px 2px Grey;
-moz-box-shadow: 0px 0px 2px 2px Grey;
-webkit-box-shadow: 0px 0px 2px 2px Grey;

/*Position*/
position: relative;
}

http://jsfiddle.net/HwpVR/8/


以防您不理解margin: 270px auto;。它将翻译成这样:

margin-top: 270px;
margin-right: auto;
margin-bottom: 270px;
margin-left: auto;

margin: 270px auto 270px auto;相同

关于html - 如何在 div 和 body 底部之间留一些空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18140637/

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