У меня есть страница с изображением, занимающим всю высоту окна браузера, столбец с текстом с правой стороны и нижний колонтитул.

При полноэкранном размере нижний колонтитул остается внизу, но его больше не происходит, когда размер экрана уменьшается, как показано на рисунке ниже.

enter image description here

Как я могу сделать так, чтобы нижний колонтитул оставался внизу в этой конфигурации, и в качестве бонуса, может быть, как нижний колонтитул не мог скрыть часть текста в правом столбце при использовании больших экранов?

JSFiddle: https://jsfiddle.net/bb61c412/273/

И соответствующий код:

.navbar {
  background-color: #FF0000;
  opacity:0.7;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important; 
}

html, body {
    height: 100%;
}

body {
  margin: 0;
  padding-top: 50px;  
}

.fill { 
    min-height: 100%;
    height: 100%;
}

#picture{ 
    height: 100%;  
    background-image: url("http://uploads2.wikiart.org/images/paul-gauguin/road-in-tahiti-1891.jpg"); 
    background-repeat: no-repeat;
    background-size:cover;
    background-position: bottom center;
}

#right-column{
  overflow-y : scroll;
  background-color:#E8E8E8 ;
  height: 100%;
}

#footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 30px;
    background-color: #FF0000;
    opacity:0.7;
}
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />


<div class="navbar navbar-default navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">         
        </div>
     </div>
</div>

<div class="container fill">

<div class="col-sm-8" id="picture"></div> 

<div class="col-sm-4" id="right-column">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie augue ac aliquet gravida. Vestibulum molestie euismod posuere. Nam posuere nulla sed nisl cursus fermentum. Aenean lobortis libero sodales purus fringilla placerat. Duis commodo ornare venenatis. Cras euismod arcu vel vehicula elementum. Vivamus vestibulum a lorem vitae posuere. Pellentesque faucibus vehicula auctor. In aliquam viverra fermentum. Aliquam dapibus nibh et magna laoreet, dignissim feugiat turpis eleifend. Aliquam porta fringilla elementum. Integer ut pellentesque ipsum. Nunc et purus vitae dui placerat pellentesque. Phasellus egestas diam ut eleifend lobortis. Nulla ultricies pulvinar ante et elementum.



 <p>
</div> 
</div>


<footer id="footer"></footer> 


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
0
michltm 14 Апр 2016 в 12:20

2 ответа

Лучший ответ

Найдите решение по приведенной ниже ссылке https://jsfiddle.net/wwut6apr/1/ position:fixed Для нижнего колонтитула необходимо добавить position: fixed вместо absolute .

Чтобы вы могли прочитать нижний текст на правой боковой панели, добавьте нижний отступ размером 30 пикселей в правый столбец.

Благодарность

1
Abhijith s.s 14 Апр 2016 в 09:46

Вам нужно обернуть контент над footer и добавить толчок div, чтобы нижний колонтитул прилипал к низу.

Измененная скрипка

Это объясняется здесь: http://ryanfait.com/resources/footer -stick-to-bottom-of-page /

0
Kypaz 14 Апр 2016 в 09:34