-1
問題1：行與其他內容溢出在引導3
行與其它內容（具體上，我提出的其他部門）溢出。
問題1：
如何使一個部門獲取視野的整個高度？喜歡用「身高：100％」
截圖：
普通截圖（PC查看） 
這是當用戶在 「電話視圖」 或更小的分辨率。 
代碼：
HTML代碼（的index.html）
<!DOCTYPE html>
<html>
<head>
<!--Meta Data-->
<meta charset="utf-8">
<meta name="author" content="Kirk Niverba" />
<meta name="description" content="Prospekt is a gaming community which helps users to comunicate, cooperate, collaborate, and share ideas or just to bond with other players or gamers out there!">
<link rel="author" href="https://plus.google.com/u/0/100208830349097131526" />
<link rel="publisher" href="https://plus.google.com/u/0/100208830349097131526" />
<meta property="og:title" content="Prospekt | A Gaming Community" />
<meta property="og:type" content="article" />
<meta property="og:image" content="http://wallpapercave.com/wp/rJRFZZ8.png" />
<meta property="og:url" content="http://prospekt.ml" />
<meta property="og:description" content="Prospekt is a gaming community which helps users to comunicate, cooperate, collaborate, and share ideas or just to bond with other players or gamers out there!" />
<meta property="fb:admins" content="100003700811738" />
<!--Insert Required APIs-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/box.css">
<script src="assets/js/jquery-3.1.0.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/smoothscroll.js"></script>
<title>Prospekt | A Gaming Community</title>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="//prospekt.ml">Prospekt | A Gaming Community</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Prospekt</a></li>
<li><a href="#section2">Introduction</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Navigation <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Glossary</a></li>
<li>
<a href="#section42"></a>
</li>
</ul>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Member Area <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Sign In</a></li>
<li><a href="#section42">Register</a></li>
<li><a href="#section42">Forgot Password</a></li>
<li><a href="#section42">Your Dashboard</a></li>
<hr />
<li><a href="#section42">Admin Login</a></li>
<li><a href="#section42">cPanel</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container-fluid box-1 text-center" id="section1">
<br>
<br>
<h1> Welcome to Prospekt! </h1>
<hr>
<div class="row info">
<div class="col-sm-4">
<h1 class="title"> Why Prospekt? </h1>
<p class="content"> Why you should visit or use Prospekt as your social website? You should use Prospekt because it's <b>free</b>, <b>lightweight</b>, <b>fast</b>, and <b>reliable</b>.</p>
<p class="content"> We assure you your own privacy, security, enjoyment, and more when you visit our website. This website is also <em>mobile-friendly</em>, supported by jQuery and Bootstrap3. When you're a member, we assure your privacy and all the security measures to make you safe out there! Enjoy gaming! </p>
<a href="section/accounts" class="btn btn-default"><span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"></span> Learn More...</a>
</div>
<div class="col-sm-4">
<h1 class="title">Who We Are?</h1>
<p class="content">We are the gamers, or players, or geeks. It doesn't matter who you are in reality, it matters how you play or cooperate with others, avoiding to be toxic or salty out there!</p>
<p class="content">There are many ways to behave in the "tribunal" or to the games. <a href="videos.php?filter=toxicity">Learn</a> how to control yourself or became a <em>"non-salty/toxic"</em> player!</p>
<a href="section/toxicity" class="btn btn-default"><span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"></span> Anti Toxic Campaign</a>
</div>
<div class="col-sm-4">
<h1 class="title">What Do We Do?</h1>
<p class="content"> We do many things, just like other people do. It doesn't mean that we're just sitting in front of a computer for hours, even days, is we aren't doing anything or we aren't even socializing with other people. <br><br><b>[Developer]: </b>As a developer of this website, I gave like a hundred of hours contributing to this website, I want you to cooperate with the system, by not being a toxic or a salty player. Enjoy my website and Happy Gaming out there!</p>
<a href="section/testinomials" class="btn btn-default"><span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"></span> Testimonials</a>
<a href="section/developer" class="btn btn-default"><span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"></span> Developer Bio</a>
</div>
</div>
</div>
<div class="container-fluid box-2 text-center" id="section2">
<h1> Other Informations </h1>
<hr>
</div>
</body>
</html>
的Javascript（用於scrollspy和平滑滾動）
$(document).ready(function(){
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
CSS文件
/*
Author: Kirk Niverba
Project Name: Prospekt - DivCSS
Date: Sept 4, 2016
License: MIT License
*/
.box-1 {
height: 700px;
background-color: lightgreen;
color: black;
padding: 15px;
}
.box-2{
height: 640px;
background-color: #faf0e6;
color: black;
padding: 15px;
}
hr {
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr:after {
content: "§";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
}
h1.title{
font-family: Impact;
}
p.content {
font-family: Century Gothic;
font-size: 17px;
}
.info{
overflow: hidden;
}