0

嗨，我想在我的身体中间放一个 div。此 div 的最小高度为 400 像素，但此 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;   
}

这是我在 jsFiddle 上的代码

4

2 回答 2

3

不要使用绝对定位，因为 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;

于 2013-08-09T05:57:30.887 回答
1

不要设置绝对位置。对于居中内容，请使用以下内容：

margin:0px auto;
width: 1000px;
position: relative;

然后您可以添加一些 div 以在底部添加空间，或者只需将 margin-bottom 设置为内容 div。

于 2013-08-09T05:50:26.320 回答