有人能说出为什么我的网页组件在调整浏览器大小时会重叠吗？以及如何解决它？我注意到如果我用topContainer的两个副本替换aboutContainer和bottomContainer，则不会出现问题。所以我只知道这两个容器有问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Example 2</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.navbar-brand{
font-size:1.7em;
}
#topContainer{
background-image:url("image/background2.jpg");
width:100%;
background-size:cover;
color:white;
}
.box{
background-color:#F1F1F1;
border:1px solid grey;
}
#topRow{
margin-top:150px;
text-align:center;
}
#topRow h1{
font-size:350%;
}
.bold{
font-weight:bold;
}
.marginTop{
margin-top:30px;
}
.center{
text-align:center;
}
.buttonBorder{
border:1px solid #F8F8F8;
}
.title{
margin-top:30px;
font-size:350%;
}
.image-size{
margin:20px;
width:300px;
height:250px;
}
#bottomContainer{
background-color:#B19CE3;
width:100%;
}
.logo{
height:100px;
}
#myModal{
margin-top:100px;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="navbar navbar-default navbar-fixed-top" >
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="">The way of GO</a>
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active" ><a href="#topContainer">Home</a></li>
<li><a href="#aboutContainer">About</a></li>
<li><a href="#bottomContainer">Playing Go</a></li>
<li><a href="https://www.facebook.com/Phammanhhiep">Donate</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<label>Username</label>
<input type="email" placeholder="email..." class="form-control"
name="username"></input>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" placeholder="password..." class="form-control"
name="password"></input>
</div>
<div class="form-group">
<button type="submit"class="btn btn-success">Log In</input>
</div>
</form>
</div>
</div>
</div>
<div class="container contentContainer" id="topContainer">
<div class="row">
<div class="col-md-6 col-md-offset-3" id="topRow">
<h1>So, what is GO?</h1>
<p class="lead ">Go is an ancient Chinese board game, in fact it's so ancient there is no other board game in the world
that we have found evidence of existing before go.</p>
<p class="bold marginTop">Interested? Subscribe now!</p>
<form class="marginTop">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="email" class="form-control"placeholder="your email..."></input>
</div>
<button class="btn btn-success btn-lg marginTop buttonBorder" type="submit">Subscribe</button>
</form>
</div>
</div>
</div>
<div class="container contentContainer" id="aboutContainer">
<div class="row center">
<h1 class="center title">Why GO is Awesome</h1>
<p class="lead">Summary of Go's history and awesomeness</p>
</div>
<div class="row center">
<div class="col-md-4 marginTop">
<h2><span class="glyphicon glyphicon-leaf"></span> History</h2>
<p>Brief introduction about the app. Brief introduction about the app. Brief introduction about the app.
Brief introduction about the app. Brief introduction about the app.</p>
<button class="btn btn-success marginTop" data-toggle="modal"
data-target="#myModal">Sign Up</button>
<img class="image-size" src="image/pic1.jpg" />
</div>
<div class="col-md-4 marginTop">
<h2><span class="glyphicon glyphicon-leaf"></span> How-to-play</h2>
<p>Brief introduction about the app. Brief introduction about the app. Brief introduction about the app.
Brief introduction about the app. Brief introduction about the app.</p>
<button class="btn btn-success marginTop" data-toggle="modal"
data-target="#myModal">Sign Up</button>
<img class="image-size" src="image/pic2.jpg" />
</div>
<div class="col-md-4 marginTop">
<h2><span class="glyphicon glyphicon-leaf"></span> Books</h2>
<p>Brief introduction about the app. Brief introduction about the app. Brief introduction about the app.
Brief introduction about the app. Brief introduction about the app.</p>
<button class="btn btn-success marginTop" data-toggle="modal"
data-target="#myModal">Sign Up</button>
<img class="image-size" src="image/pic3.jpg" />
</div>
</div>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="marginTop center">The way of GO</h2>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input class="form-control" type="email" placeholder="your email"></input>
</div>
<div class="form-group">
<input class="form-control" type="password" placeholder="password"></input>
</div>
<div class="form-group">
<input class="form-control" type="password" placeholder="confirm password"></input>
</div>
<button type="submit" class="btn btn-success">Sign Up</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container contentContainer" id="bottomContainer">
<div class="row center marginTop">
<h1 class="center title">Playing GO now!</h1>
<p class="lead center">Two most popular websites for go players</p>
</div>
<div class="row center marginTop">
<div class="col-md-6 center" >
<h1 class="title">KGS</h1>
<img class="marginTop logo" src="image/kgslogo.png" /></br>
<button class="btn btn-success marginTop">Play now!</button>
</div>
<div class="col-md-6 center">
<h1 class="title">Pandanet</h1>
<img class="marginTop logo" src="image/pandanet.png" /></br>
<button class="btn btn-success marginTop">Play now!</button>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script>
$(".contentContainer").css("height", $(window).height()+"px");
</script>
</body>
</html>
答案 0 :(得分：0)
这是因为你指定了容器的高度。
http://plnkr.co/edit/lyDWUbFRJbHVVH0WYcyA
我评论了
<script>
$(".contentContainer").css("height", $(window).height()+"px");
</script>
它不再重叠了。简单地将该代码包装在调整大小处理程序中将不起作用。您可能想要使用margin或padding来代替。不过，我还没有测试过。
我修复了其他一些HTML错误。