Footer is on top of the slider, more precisely the points of the slider are shifted along with Footer'ом . enter image description here

CSS :

 #forfooter { position: absolute; left: 0; bottom: 0; width: 100%; height: 80px; }

HTML :

 <body> <!-- Общий div для всей в --> <div class="maindiv" id="main_div"> <!-- Блок хедера (шапка сайта) --> <div id="forheader"> <img src="http://placehold.it/900x108" width="900" height="108" alt="Хедер" title="Шапка сайта" /> </div> <!-- Конец блока хедера --> <div id="forbody"> <div class="tabs"> <ul class="nav nav-pills centered" id='MenuMenu'> <!--Вместо табс можно pills, другие кнопки будут--> <li><a href="#tab-1" data-toggle="tab">Вкладка меню 1</a></li> <li><a href="#tab-2" data-toggle="tab">Вкладка меню 2</a></li> <li><a href="#tab-2" data-toggle="tab">Вкладка меню 2</a></li> <li><a href="#tab-2" data-toggle="tab">Вкладка меню 2</a></li> </ul> </div> </div> <!--СЛАЙДЕР --> <div id="carousel" class="carousel slide"> <!--Индикаторы слайдов--> <ol class="carousel-indicators"> <li class="active" data-target="#carousel" data-slide-to="0"></li> <!—внизу 3 круглишка--> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol> <!--Слайды--> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/948x265" alt=""> <div class="carousel-caption"> <h3>Первый слайд</h3> <p>Описание первого слайда</p> </div> </div> <div class="item"> <img src="http://placehold.it/948x265" alt=""> <div class="carousel-caption"> <h3>Второй слайд</h3> <p>Описание 2 слайда</p> </div> </div> <div class="item"> <img src="http://placehold.it/948x265" alt=""> <div class="carousel-caption"> <h3>Третий слайд</h3> <p>Описание 3 слайда</p> </div> </div> </div> <!--Стрелки переключения слайдов--> <a href="#carousel" class="left carousel-control" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#carousel" class="right carousel-control" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> <!-- Блок футера --> <div id="forfooter"> <img src="http://placehold.it/900x67" width="900" height="67" alt="Футер" title="Производители" /> </div> <!-- Конец футера --> </div> <script src="js/Script.js" type="text/javascript"></script> <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> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js "></script> </body>

1 answer 1

You have a footer inside the carousel.

Or take it out:

 #forfooter { position: absolute; left: 0; bottom: 0; width: 100%; height: 80px; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" /> </head> <body> <!-- Общий div для всей в --> <div class="maindiv" id="main_div"> <!-- Блок хедера (шапка сайта) --> <div id="forheader"> <img src="http://placehold.it/900x108" width="900" height="108" alt="Хедер" title="Шапка сайта" /> </div> <!-- Конец блока хедера --> <div id="forbody"> <div class="tabs"> <ul class="nav nav-pills centered" id='MenuMenu'> <!--Вместо табс можно pills, другие кнопки будут--> <li><a href="#tab-1" data-toggle="tab">Вкладка меню 1</a></li> <li><a href="#tab-2" data-toggle="tab">Вкладка меню 2</a></li> <li><a href="#tab-2" data-toggle="tab">Вкладка меню 2</a></li> <li><a href="#tab-2" data-toggle="tab">Вкладка меню 2</a></li> </ul> </div> </div> <!--СЛАЙДЕР --> <div id="carousel" class="carousel slide"> <!--Индикаторы слайдов--> <ol class="carousel-indicators"> <li class="active" data-target="#carousel" data-slide-to="0"></li> <!—внизу 3 круглишка--> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol> <!--Слайды--> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/948x265" alt=""> <div class="carousel-caption"> <h3>Первый слайд</h3> <p>Описание первого слайда</p> </div> </div> <div class="item"> <img src="http://placehold.it/948x265" alt=""> <div class="carousel-caption"> <h3>Второй слайд</h3> <p>Описание 2 слайда</p> </div> </div> <div class="item"> <img src="http://placehold.it/948x265" alt=""> <div class="carousel-caption"> <h3>Третий слайд</h3> <p>Описание 3 слайда</p> </div> </div> </div> <!--Стрелки переключения слайдов--> <a href="#carousel" class="left carousel-control" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#carousel" class="right carousel-control" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <!-- Блок футера --> <div id="forfooter"> <img src="http://placehold.it/900x67" width="900" height="67" alt="Футер" title="Производители" /> </div> <!-- Конец футера --> <script src="js/Script.js" type="text/javascript"></script> <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> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js "></script> </body> </html>

Or, change the position by setting bottom: -80px; :

 #forfooter { position: absolute; left: 0; bottom: -80px; width: 100%; height: 80px; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" /> </head> <body> <!-- Общий div для всей в --> <div class="maindiv" id="main_div"> <!-- Блок хедера (шапка сайта) --> <div id="forheader"> <img src="http://placehold.it/900x108" width="900" height="108" alt="Хедер" title="Шапка сайта" /> </div> <!-- Конец блока хедера --> <div id="forbody"> <div class="tabs"> <ul class="nav nav-pills centered" id='MenuMenu'> <!--Вместо табс можно pills, другие кнопки будут--> <li><a href="#tab-1" data-toggle="tab">Вкладка меню 1</a></li> <li><a href="#tab-2" data-toggle="tab">Вкладка меню 2</a></li> <li><a href="#tab-2" data-toggle="tab">Вкладка меню 2</a></li> <li><a href="#tab-2" data-toggle="tab">Вкладка меню 2</a></li> </ul> </div> </div> <!--СЛАЙДЕР --> <div id="carousel" class="carousel slide"> <!--Индикаторы слайдов--> <ol class="carousel-indicators"> <li class="active" data-target="#carousel" data-slide-to="0"></li> <!—внизу 3 круглишка--> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol> <!--Слайды--> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/948x265" alt=""> <div class="carousel-caption"> <h3>Первый слайд</h3> <p>Описание первого слайда</p> </div> </div> <div class="item"> <img src="http://placehold.it/948x265" alt=""> <div class="carousel-caption"> <h3>Второй слайд</h3> <p>Описание 2 слайда</p> </div> </div> <div class="item"> <img src="http://placehold.it/948x265" alt=""> <div class="carousel-caption"> <h3>Третий слайд</h3> <p>Описание 3 слайда</p> </div> </div> </div> <!--Стрелки переключения слайдов--> <a href="#carousel" class="left carousel-control" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#carousel" class="right carousel-control" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> <!-- Блок футера --> <div id="forfooter"> <img src="http://placehold.it/900x67" width="900" height="67" alt="Футер" title="Производители" /> </div> <!-- Конец футера --> </div> <script src="js/Script.js" type="text/javascript"></script> <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> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js "></script> </body> </html>