HTML内容超出CSS高度
[英]HTML content overflowing outside CSS height
问题描述
This is an image of the "overflow" problem on my webpage for a school assignment: 
这是我的学校作业页面上“溢出”问题的图像：
The worst quick-and-dirty solution would be just to extend the height x2 or something. 最糟糕的快捷方法是仅仅将高度x2扩大。 But im woundering if there is a CSS way that automatically extends my div='body' height according to the amount of html content, but I'm doubtful such functionality exists. 但是，如果有一种CSS方法可以根据html内容的数量自动扩展div ='body'的高度，那我就很痛苦，但是我怀疑这种功能是否存在。
index.html : 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 : 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 个解决方案
解决方案1
1 2013-11-06 04:39:23
CSS has the ability to automatically adjust the height of elements to fill their content. CSS能够自动调整元素的高度以填充其内容。
Try the following: 请尝试以下操作：
#body
{
position: relative;
height:auto;
background-color:#00CCCC;
}
解决方案2
0 2013-11-06 04:41:53
I think that needs to happen in the wrapper. 我认为这需要在包装器中进行。
#wrapper {
height: auto;}
You can also do this: 您也可以这样做：
#wrapper {
overflow-y: auto;}
解决方案3
0 2013-11-06 04:53:26
Try this css 试试这个CSS
#wrapper {
position: relative;
margin: auto;
width:800px;
height:auto;
font-size:1.20em;
}
BODY 身体
#body {
position: relative;
height:100%;
background-color:#00CCCC;
}
解决方案4
0 2013-11-06 04:57:51
If you really want to have the body's height to be 660px as a starting point, you can change height to min-height . 如果您确实希望将身体的高度设为660px作为起点，则可以将height更改为min-height 。
#body {
position: relative;
min-height:660px;
background-color:#00CCCC;
}
If you don't care about the height of the body you can just leave out height from the body css because it will scale depending on its contents. 如果您不在乎身体的高度，则可以从身体css忽略height ，因为它会根据其内容缩放。
Lastly, remove the height in the wrapper unless you're sure that your entire page won't go that far down. 最后，除非确定整个页面不会走得太远，否则请除去包装纸中的height 。
#wrapper {
position: relative;
margin: auto;
width:800px;
font-size:1.20em;
}
If you want to keep the height to 1000px you can add overflow-y: auto to the wrapper so it shows a scrollbar just in case the contents go over. 如果要将高度保持在1000px ，则可以在包装器中添加overflow-y: auto ，以便显示滚动条，以防内容溢出。
#wrapper {
position: relative;
margin: auto;
width:800px;
height:1000px;
font-size:1.20em;
overflow-y: auto;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.