I'm building a site in BootStrap and my scroll disapepeared completely. I now can't scroll up and down. Why is that? I already tried overflow, overflow-y, but I don't understand what I'm doing wrong.
HTML
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Sugoi!</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="Anime"><a href="#Anime">Anime</a></li>
<li class="Manga"><a href="#manga">Manga</a></li>
<li class="Jogos"><a href="#Jogos">Jogos</a></li>
<li class="Opiniao"><a href="#Opiniao">Opinião</a></li>
<li class="Outros">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Outros <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">AMV</a></li>
<li><a href="#">Cosplay</a></li>
<li><a href="#">Passatempos</a></li>
</ul>
</li></ul>
<ul class="pull-right nav navbar-nav">
<li><a href="#about">Sobre</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sugoi!</h1>
<div class="jumbotron">
<div class="container">
<a href="http://google.com"><h1>Persona 4 - The Animation</h1>
<p>Sabe mais!</p></a>
</div>
</div>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
</div>
CSS
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
#wrap > .container {
padding: 60px 15px 0;
}
.container .credit {
margin: 20px 0;
}
#footer > .container {
padding-left: 15px;
padding-right: 15px;
}
code {
font-size: 80%;
}
.jumbotron {
background-image:url('http://tomodom.com/wp-content/uploads/2013/07/Persona4Golden_Hero.jpg');
height:400px
}
The Div with the fixed position called "" doesn't close until after the page content, which is located just before the div with the id of Footer. Instead it should finish at the end of the nav section.
Copy this.