0

这是我的学校作业网页上“溢出”问题的图像： 在此处输入图像描述

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

索引.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>

样式.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
4

4 回答 4

1

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

尝试以下操作：

#body
{
    position: relative;
    height:auto;
    background-color:#00CCCC;
}
于 2013-11-06T04:39:23.257 回答
0

我认为这需要在包装中发生。

    #wrapper {
    height: auto;}

你也可以这样做：

    #wrapper {
    overflow-y: auto;}
于 2013-11-06T04:41:53.503 回答
0

试试这个 CSS

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

}

身体

#body {
    position: relative;
    height:100%;
    background-color:#00CCCC;
}
于 2013-11-06T04:53:26.047 回答
0

如果真的想以身体的高度为660px起点，可以height改成min-height.

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

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

最后，删除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;
}
于 2013-11-06T04:57:51.250 回答