Question

这是我的网页上针对学校作业的“溢出”问题的图片： enter image description here

最糟糕的快速和肮脏的解决方案只是扩展高度x2或其他东西。但是我想知道是否有一种CSS方式可以根据html内容的数量自动扩展我的div ='body'高度，但我怀疑这样的功能是否存在。

的index.html ：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>Project</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

<div id="wrapper">
    <div id="header">
        <div id="loggeduser"><?php echo $usernamedisplayed; ?></div>
        <div id="loggedoutuser"><a href="logout.php">Logout</a></div>   </div>
    <div id="menu">
        <div id="homelink"><div id="currentlink"><a href="index.php">Home</a></div></div>
        <div id="loginlink"><a href="login.php">Login</a></div>
        <div id="signuplink"><a href="signup.php">Register</a></div>
        <div id="postinglink"><a href="post.php">Post</a></div>
        <div id="repostinglink"><a href="repost.php">Repost</a></div>
        <div id="userlink"><a href="user.php">User</a></div>
    </div>
    <div id="body">
        <table border="2">
        <tr>
            <th>Username</th>
            <th>Contents</th>
            <th>Date(D/M/Y)</th>
            <th>Image</th>
        </tr>

        <!-- ...a lot of PHP tables--> 

    </div>
    <div id="footer">
        <p>Copyright © 2013, CS215 University of Regina. All rights reserved.</p>
        <a href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1 " height="31" width="88"/> </a>
    </div>
</div>

</body>

的style.css ：

/* Structure */

#wrapper {
    position: relative;
    margin: auto;
    width:800px;
    height:1000px;
    font-size:1.20em;

}

#header {
    position: relative;
    height:200px;
    background:url(images/bubblerheader.png);
}

#menu {
    position: relative;
    height:40px;
    background:url(images/bubblermenu.png);
}

#body {
    position: relative;
    height:660px;
    background-color:#00CCCC;
}

#footer {
    position: relative;
    height:100px;
    background-color:#00CCCC;
    background:url(images/bubblerfooter.png) no-repeat;
}

/* Structure Extras */

//a lot of id's and classes

Answer 1

CSS可以自动调整元素的高度以填充其内容。

尝试以下方法：

#body
{
    position: relative;
    height:auto;
    background-color:#00CCCC;
}

Answer 2

我认为需要在包装器中进行。

    #wrapper {
    height: auto;}

你也可以这样做：

    #wrapper {
    overflow-y: auto;}

Answer 3

试试这个css

#wrapper {
    position: relative;
    margin: auto;
    width:800px;
    height:auto;
    font-size:1.20em;

}

BODY

#body {
    position: relative;
    height:100%;
    background-color:#00CCCC;
}

Answer 4

如果您确实希望身体的高度为660px作为起点，则可以将height更改为min-height。

#body {
    position: relative;
    min-height:660px;
    background-color:#00CCCC;
}

如果您不关心身体的高度，您可以从身体css中遗漏height，因为它会根据其内容进行缩放。

最后，删除包装中的height，除非您确定整个页面不会那么远。

#wrapper {
    position: relative;
    margin: auto;
    width:800px;
    font-size:1.20em;
}

如果你想将高度保持在1000px，你可以将overflow-y: auto添加到包装器中，这样它就会显示一个滚动条，以防内容结束。

#wrapper {
    position: relative;
    margin: auto;
    width:800px;
    height:1000px;
    font-size:1.20em;
    overflow-y: auto;
}

HTML内容溢出CSS高度

4 个答案: