gpt4 book ai didi

HTML 内容超出 CSS 高度

转载 作者:太空宇宙 更新时间:2023-11-04 14:22:38 24 4
gpt4 key购买 nike

这是我的学校作业网页上的“溢出”问题的图片: 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

最佳答案

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

尝试以下操作:

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

关于HTML 内容超出 CSS 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19804198/

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