Bootstrap：图片满div高度的页脚

Question

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

在全屏尺寸下，页脚会粘在底部，但是当屏幕尺寸减小时它就不再显示了，如下图所示。

如何在此配置中将页脚粘贴在底部，作为奖励，在使用大屏幕时，页脚怎么可能不会隐藏右侧列的文本部分？

的jsfiddle：https://jsfiddle.net/bb61c412/273/

相应的代码：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

要阅读右侧栏上的底部文字，请在右栏中添加 30px 的填充底部。

由于

Answer 2

您需要打包 footer上方的内容，并添加推送div以使页脚粘到底部。

Modified fiddle

这里解释：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/