html - Bootstrap : Footer with image full div height

Question

我有一个页面，其中包含占据浏览器窗口整个高度的图像、右侧有文本的列和页脚。

在全屏尺寸下，页脚会粘在底部，但当屏幕尺寸缩小时，页脚就不会再出现了，如下图所示。

在此配置中，如何让页脚固定在底部，作为奖励，也许在使用大屏幕时页脚如何不隐藏右侧栏中的部分文本？

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>

Answer 1

请在下面的链接中找到解决方案 https://jsfiddle.net/wwut6apr/1/ 位置:固定您必须为页脚添加 position: fixed 而不是 absolute。

为了让您阅读右侧栏的底部文本，请向右侧栏添加 30 像素 的填充底部。

谢谢