0

これは、学校の課題に関する私の Web ページの「オーバーフロー」問題のイメージです。 ここに画像の説明を入力

最悪の迅速かつ汚い解決策は、高さを 2 倍にするか何かにすることです。しかし、html コンテンツの量に応じて div='body' の高さを自動的に拡張する CSS の方法がある場合、私は傷つきますが、そのような機能が存在するかどうかは疑わしいです。

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
4

4 に答える 4

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 に答える