Bootstrap липкий нижний колонтитул с изображением

То, что я пытаюсь достичь, это страница с липким нижним колонтитулом, который является векторным островом.Bootstrap липкий нижний колонтитул с изображением

Остров всегда находится в нижней части страницы, но когда высота браузера слишком мала, он вызывает вертикальную прокрутку.
За островом солнечный заряд, который затем падает за все содержимое страницы. Это довольно большой, около 1417 пикселей. Однако это не влияет на вертикальную прокрутку.

Вот что у меня есть до сих пор, и я застрял часами! Любая помощь будет оценена по достоинству.

<!DOCTYPE html> 
 

 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta content="IE=edge" http-equiv="X-UA-Compatible"> 
 
    <meta content="width=device-width, initial-scale=1.0" name="viewport"> 
 
    <meta content="" name="description"> 
 
    <meta content="" name="author"> 
 
    <link href="../../docs-assets/ico/favicon.png" rel="shortcut icon"> 
 

 
    <title>Sticky Footer Template for Bootstrap</title><!-- Latest compiled and minified CSS --> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
 
    <style type="text/css"> 
 

 
    html, 
 
    body { 
 
    height: 100%; 
 
    background-color: #6ec8e4; 
 
    } 
 

 
    #wrap { 
 
    min-height: 100%; 
 
    height: auto; 
 
    } 
 

 

 
    .testBox{ 
 
    height: 300px; 
 
    width: 100%; 
 
    background: red; 
 
    margin: 20px 0; 
 
    } 
 

 
    .footer-image-container { 
 
    margin: 0 auto; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 1417px; 
 
    } 
 

 
    .footer-image { 
 
    position: absolute; 
 
    bottom: 0; 
 
    z-index: -1; 
 
    } 
 

 
    </style> 
 
</head> 
 

 
<body> 
 
    <!-- Wrap all page content here --> 
 

 
    <div id="wrap"> 
 
    <!-- Begin page content --> 
 

 
    <div class="container"> 
 
     <div class="page-header"> 
 
     <h1>Sticky footer</h1> 
 
     </div> 
 

 
     <div class="row"> 
 
     <div class="testBox"></div> 
 
     </div> 
 

 
     <div class="row"> 
 
     <div class="testBox"></div> 
 
     </div> 
 

 
     <div id="footer"> 
 
     <div class="footer-image-container"><img class="img-responsive footer-image" src="http://i.imgur.com/wSNrfJD.png"> 
 
     <img class="img-responsive footer-image" src="http://i.imgur.com/alDv0tE.png"></div> 
 
     </div> 
 
    </div> 
 
    </div><!-- Bootstrap core JavaScript 
 
    ================================================== --> 
 
    <!-- Placed at the end of the document so the pages load faster --> 
 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
</body> 
 
</html>

источник

2015-09-20 oOPurple_HazeOo

Было бы лучше использовать изображения в качестве фоновых изображений в CSS:

см https://jsfiddle.net/6t9vxq1o/1/

.body{ 
    height:100%; 
    background: url(http://i.imgur.com/wSNrfJD.png) no-repeat center bottom; 
} 
#wrap{ 
    background:url(http://i.imgur.com/alDv0tE.png) no-repeat center bottom; 
}

Таким образом, изображения будут всегда на дне, солнечный заряд за содержанием, а трава за нижним колонтитулом

источник

2015-09-20 23:36:40 Hacktisch

Работал как шарм. Спасибо, Мерийн! –

Bootstrap липкий нижний колонтитул с изображением

ответ

Смежные вопросы