所以我正在寻找为什么div在我的本地预览中底部有如此多空间的原因，但是在jsfiddle中却没有。
在JSFiddle中，底部的div是紫色的，但这就是它在我的本地副本中的显示方式：http://prntscr.com/ingfwa
JSFiddle：https://jsfiddle.net/eaLpf4f5/2/
JSFiddle中的额外空格或者本地副本中的额外空格是否为紫色？我试过检查代码，看起来它可能是最后一个col-md-2的东西，但那是一列，而不是一行，所以我不确定。也尝试将其删除无效。
我知道工具栏现在也被打破了，此刻并没有关注它。另外我知道CSS在HTML和CSS中的类和ID的顺序方面是不合适的。
#div3{
background-color: purple;
}
.formdiv{
float:left;
position: relative;
top: -25em;
height: 25em;
}
.p6{
text-align:center;
color: white;
}
.bar5{
border: 3px gray solid;
width: 65%;
position: relative;
top: 1em;
left: 10em;
}
#lt3{
font-size: 2.9em;
position: relative;
margin-left: 2.2em;
top: -0.5em;
color:white;
font-family: Acme, sans-serif;
}
#lt4{
font-size: 2.9em;
position: relative;
margin-left: 15.5em;
top: -2.2em;
color:white;
font-family: Acme, sans-serif;
}
.contacttextdiv{
width: 10em;
position: relative;
left: 30em;
top: -5em;
font-size: 1.3em;
}
input, textarea {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 200px;
background: #FFFFFF;
}
textarea
{
width: 400px;
max-width: 400px;
height: 150px;
line-height: 150%;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
}
.form label {
margin-left: 10px;
color: #999999;
}
.submit input {
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
}
input, textarea {
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
input, textarea {
background: -webkit-gradient(linear, left top, left 25, from(#EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #EEEEEE), #FFFFFF 25px);
}
input:hover, textarea:hover,
input:focus, textarea:focus {
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
.submit input {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}<!DOCTYPE html>
<html>
<body>
<head>
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title></title>
</head>
<div class="container">
<div class="row">
<div class="col-xs-12" id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
</div>
<div class="row">
<div class="col-md-2">Test</div>
<div class="col-md-8" id="div1">
<div>
<p id="p1"><strong>Front-end developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.</strong></p>
<p id="p2"><div class="bar"></div>
<p id="lt1"><strong></></strong></p>
<p class="p2"><strong> Web Developer - User Experience Designer</strong></p>
<img src="LOGO.jpg" class="pic1"/>
</div>
</div>
<div class="col-md-2">Test</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" id="div2">
<p class="p4"><strong>Portfolio</strong></p>
<div class="bar2"></div>
<div class="bar3"></div>
<p id="lt2"><strong></></strong></p>
<img src="fakesample1.jpg" class="pic2"/>
<img src="fakesample2.jpg" class="pic3"/>
<img src="fakesample3.jpg" class="pic4"/>
<img src="fakesample4.jpg" class="pic5"/>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" id="div3">
<p class="p6"><strong>Contact Me</strong></p>
<p id="p2"><div class="bar5"></div>
<p id="lt3"><strong></></strong></p>
<p id="lt4"><strong></></strong></p>
<div class="contacttextdiv">
<p class="contacttext"><strong>Contact me here! If you want me to do web design work, walk your dog, pet your cat, water your plants, or just have a chat! This is the place to do it! No spam please, thanks.</p></strong>
</div>
<div class="formdiv">
<form class="form">
<p class="name">
<input type="text" name="name" id="name" />
<label for="name">Name</label>
</p>
<p class="email">
<input type="text" name="email" id="email" />
<label for="email">E-mail</label>
</p>
<p class="web">
<input type="text" name="web" id="web" />
<label for="web">Website</label>
</p>
<p class="text">
<textarea name="text"></textarea>
</p>
<p class="submit">
<input type="submit" value="Send" />
</p>
</form>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-xs-12" id="bottombar1">About This Page</div>
<div class="col-xs-12"></div>
</body>
</html>
答案 0 :(得分：1)
更改身高
.formdiv {
float: left;
position: relative;
top: -25em;
height: 1em;
}