我的 <textarea> 以及它之后的所有内容似乎都超出了我的 div 的背景。答案

【问题标题】：My <textarea> and everything after it appears to go past my div's background.我的 <textarea> 以及它之后的所有内容似乎都超出了我的 div 的背景。
【发布时间】：2011-10-15 12:57:05
【问题描述】：

这里是html：

<body>
<div id="container">
<div id="banner">
</div>
<div id="navigation">
<a href="index.html"><img src="images/front_end/nav_home.png" alt="Home" /></a><a href="portfolio.html"><img src="images/front_end/nav_portfolio.png" alt="Portfolio" /></a><a href="about.html"><img src="images/front_end/nav_about.png" alt="About" /></a><a     href="contact.html"><img src="images/front_end/nav_contact.png" alt="Contact" /></a>
</div>

<div id="content">
<div id="title">
Contact
</div>

<form id="emailform" method="POST" action="">
<label for="name">Name: </label><input class="inputs" type="text" name="name" />
<p><label for="email">Email: </label><input class="inputs" type="text" name="email" /></p>
<p><label for="phone">Phone: </label><input class="inputs" type="text" name="phone" /></p>
<p><label for="message">Your Message: </label><textarea id="largemessage" name="message"></textarea></p>
<input type="submit" id="submit" value="Send Message"/>
</form>

</div>

和 CSS：

body {
background-color: #111014;
background-image: url("images/front_end/bg.png");
background-repeat: repeat-x;
}

#container {
height: auto;
width: 1000px;
margin-left: auto;
margin-right: auto;
}

#banner {
margin-top: 45px;
margin-bottom: 38px;
height: 68px;
width: 1000px;
background-image: url("images/front_end/bannerbg.png");
}

#navigation {
height: 36px;
width: 1000px;
margin-left: 49px;
}

#content {
background-image: url("images/front_end/contentbg.png");
background-repeat: repeat-y;
height: 100%;
width: 1000px;
padding-left:80px;
padding-right:60px;
padding-bottom: 20px;
margin-bottom: -8px;
}

#title {
height: 90px;
width: 542px;
padding-left: 60px;
padding-top: 36px;
background-image: url("images/front_end/titlebg.png");
background-repeat:no-repeat;
font-family: tahoma;
font-size: 2.5em;
color: #dad8df;
margin-left: -80px;
}

#emailform {
color: #dad8df;
font-family: tahoma;
}

.inputs {
float: right;
margin-right: 675px;
width: 200px;
font: .9em tahoma;
}

#largemessage {
float: right;
clear: both;
margin-right: 175px;
width: 700px;
height: 150px;
resize: none;
font: .9em tahoma;
}

#submit {
margin-right: 175px;
clear: both;
float: right;
}

以及正在发生的事情的图片：

这里有一张图片的链接：The Picture

我意识到我确实给了你一堆东西来整理，但我看了很多遍，就是想不通。

提前感谢您的帮助。

【问题讨论】：

标签： html css forms textarea

【解决方案1】：

给你的“内容”<div> 样式 overflow: hidden; 看看是否有帮助。

【讨论】：

Pointy 是正确的：jsfiddle.net/bWkW9 背景设置为橙色，而不是用于测试的图像。去掉overflow hidden就可以看到OP的问题了。

【解决方案2】：

textarea和submit按钮不影响表单高度的原因是它们是浮动的。

您可以使用overflow 样式使表单也包含浮动元素：

#emailform {
  color: #dad8df;
  font-family: tahoma;
  overflow: hidden;
}

（您对overflow 使用什么设置并不重要，因为您没有为元素指定大小。）

【讨论】：

正是我需要的！谢谢

【解决方案3】：

添加

<div style="clear: both;"></div>

到页面底部，在结束 body 标记之前。

【讨论】：

这可以工作，但最好是正确设置容器的样式。
那么你必须给容器一个有价值的高度。
不，@imoda，你不这样做，因为通过使其“溢出：隐藏”，您可以使其围绕“浮动”内容。