设置输入框的高度似乎有一个非常奇怪的问题。
一旦我设置输入框的高度，上面的DIVS就会拉伸。
一个值得注意的例子是，一旦设置了高度，背景图像就会延伸，以及“mainContent类”中的所有其他div，但只要从输入框中移除高度，一切都正常
之前有没有人注意到这个问题，并提供一些帮助？
此处代码：http://codepen.io/anon/pen/WQeedZ
HTML：
<div class="container">
<div class="leftmenu">
<div class="logo">
<img src="http://callmenick.com/theme/callmenick/img/logo.svg" alt=""/>
</div>
<div class="social">
<span class="fa fa-facebook"></span>
<span class="fa fa-instagram"></span>
<span class="fa fa-twitter"></span>
<span class="fa fa-youtube"></span>
<span class="fa fa-vine"></span>
<span class="fa fa-tumblr"></span>
<span class="fa fa-google-plus"></span>
<span class="fa fa-linkedin"></span>
</div>
<div class="nav">
<ul class="navigation">
<li>
<a class="scroll" href="#home">Home</a>
</li>
<li>
<a class="scroll" href="#videos">Videos</a>
</li>
<li>
<a class="scroll" href="#gallery">Gallery</a>
</li>
<li>
<a class="scroll" href="#about">About</a>
</li>
<li>
<a class="scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
<div class="mainContent">
<div id="home">
<div>
<h1>It's Magic</h1>
<p>You just need to believe!</p>
</div>
</div>
<div id="videos">
<div>
<h1 class="wow clock bounceIn">Videos</h1>
</div>
</div>
<div id="gallery">
<div>
<h1 class="wow rubberBand">Gallery</h1>
</div>
</div>
<div id="about">
<div>
<h1 class="wow zoomIn">About</h1>
</div>
</div>
<div id="contact">
<div>
<h1 class="wow rollIn">Contact</h1>
<div class="formOuter">
<form method="post">
<input type="text" name="name" id="name" placeholder="Your Name"/>
<input type="text" name="email" id="email" placeholder="Your Email"/>
<input type="text" name="phone" id="phone" placeholder="Your Phone Number"/>
<input type="text" name="subject" id="subject" placeholder="Subject"/>
<textarea id="textarea" name="message" placeholder="Your Message"></textarea>
</form>
</div>
<div class="copyright">
<p>© Arshdeep Soni 2015. All Rights Reserved.</p>
<p>Website Designed and Managed by Arshdeep Soni</p>
</div>
</div>
</div>
</div>
<div class="footer">
<div>
<ul>
<li>
<a href="#">Subscribe</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
CSS：
* { margin:0 auto;
padding:0px;
}
html, body {
margin:0 auto;
padding:0px;
min-height: 100%;
height: 100%;
}
/*Main Container for Body*/
.container {
position: relative;
display: table;
height: 100%;
width: 100%;
}
.container > div {
display: inline-block;
vertical-align: top;
}
.leftmenu {
position: fixed;
width: 22%;
min-height: 100%;
margin-left: 0px;
height: 100%;
z-index: 99;
background-color: #28aadc;
overflow-y:auto;
}
.leftmenu > h1 {
font-size: 45px;
width: auto;
color:white;
text-align: center;
font-family: 'arkhip';
padding: 10px 0px 50px 0px;
}
.logo {
display: block;
width: 60px;
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
height: 60px;
-webkit-transition: .3s;
transition: transform .3s;
}
.logo:hover {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
.leftmenu .social {
position: relative;
color: #00648c;
text-align: center;
margin: 10px 0px 35px 0px;
}
.leftmenu .social .fa {
font-size: 20px;
margin-left: 3px;
margin-right: 3px;
}
.leftmenu .social .fa:hover {
color:white;
cursor: pointer;
}
.leftmenu .nav {
position: relative;
height: auto;
padding-bottom: 60px;
}
.leftmenu .nav ul {
height: auto;
width: auto;
text-align: center;
}
.leftmenu .nav ul li {
width: 100%;
}
.leftmenu .nav ul li > a {
margin-top: 5px;
width:80%;
display: block;
text-decoration: none;
color:#00648c;
font-family: 'arkhip';
font-size: 15px;
padding:5px;
}
.leftmenu .nav ul li > a:hover {
color:white;
}
.footer {
position: fixed;
bottom:0px;
left: 0px;
width:22%;
z-index: 99999;
height: 40px;
background-color:#00648c;
}
.footer > div {
position: relative;
top:50%;
transform: translateY(-50%);
}
.footer ul {
text-align: center;
}
.footer ul li {
color: #31a9d7;
display: inline-flex;
font-family: 'arial';
font-size: 13px;
margin-left: 10px;
margin-right: 10px;
}
.footer ul li a {
color:#31a9d7;
text-decoration: none;
}
.footer ul li a:hover {
color:white;
}
.mainContent {
display: table;
position: relative;
height: 100%;
width:78%;
max-width: none;
margin:0 auto;
margin-right: 0px;
left: 22%;
}
#home {
height: 100%;
min-height: 100%;
background-image: url("https://c1.staticflickr.com/1/126/387606063_408c203f6c_b.jpg");
background-size: cover;
}
#home > div {
position: relative;
top:50%;
-webkit-transform: translateY(-50%);
height: auto;
}
#home > div > h1, #home > div > p {
position: relative;
text-align: center;
color:white;
font-family: 'arkhip;'
}
#home > div > h1 {
-webkit-transform: translate(0, -500px);
font-size: 100px;
font-family: 'arkhip';
margin:0 auto;
}
#home > div > p {
-webkit-transform: translate(0, 300px);
text-align: center;
margin:0 auto;
font-family: 'arkhip';
font-size: 18px;
}
#videos {
background-color:black;
}
.mainContent > div > div > h1 {
color:white;
text-align: center;
font-family: 'arkhip';
font-size: 60px;
padding-top: 20px;
}
#about {
background-color:white;
}
#about > div > h1 {
color:#078dff;
}
#gallery {
background-color:red;
}
#contact {
position: relative;
background-color:black;
}
.formOuter {
position: relative;
border:1px solid red;
width: 70px;
margin:0 auto;
margin-right: 10px;
}
input[type="text"] {
}
JS：
$(function() {
wow = new WOW(
{
boxClass: 'wow',
animatedClass: 'animated',
offset: 100
}
);
wow.init();
});
$(window).load(function() {
$("#home > div > p").fadeIn(1500);
$("#home > div > h1, #home > div > p").css("-webkit-transform", "translate(0px, 0px)");
$("#home > div > h1, #home > div > p").css("transition-duration","2s");
});
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});