I'm making a web page in Boostrap and I want the content to be adapted to the size of the screen on the home page (home), that is, there is neither vertical nor horizontal scroll.
How can I do it to remove it?
This is my code:
html, body, .container-fluid {
height: 100%;
}
.direccion {
font-size: 0.9em;
}
@media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float:none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
.logo_menu {
width: 50%;
margin: 0 auto;
}
}
.rrss {
margin-left: 5%;
}
.col-sm-2 {
padding-right:0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-2">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
<!--<span class="visible-xs navbar-brand">Sidebar menu</span>-->
</div>
<a href="index.html"><img class="img-responsive logo_menu" src="http://placehold.it/200x200" alt="logo home"/></a>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Quienes somos</a></li>
<li><a href="#">Que hacemos</a></li>
<li><a href="#">Quiero trabajar</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Noticias</a></li>
</ul><br/>
<div class="rrss">
<a href="#"><img src="images/facebook.png" width="10%" alt="facebook"/></a>
<a href="#"><img src="images/twitter.png" width="10%" alt="twitter"/></a>
<!--<i class="fa fa-facebook fa-lg" aria-hidden="true"></i>
<i class="fa fa-twitter fa-lg" aria-hidden="true"></i>-->
</div><br/>
<div class="direccion rrss">
<p>Dirección de la empresa</p>
<!--<p>@2016 Sabrina Couto. All rights reserved.</p>-->
</div>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-sm-10">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/2000x900/ff0000" alt="Chania">
<div class="carousel-caption">
<h1>Innovación y desarrollo de nuevas técnicas de ventas</h1>
</div>
</div>
<div class="item">
<img src="http://placehold.it/2000x900/00ff00" alt="Chania">
<div class="carousel-caption">
<h1>Formamos a toda nuestra gente desde la base</h1>
</div>
</div>
<div class="item">
<img src="http://placehold.it/2000x900/0000ff" alt="Flower">
<div class="carousel-caption">
<h1>Profesionalidad, calidad y experiencia en ventas</h1>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>