带有滚动页脚的全高内容答案

【问题标题】：full height content with scrolling footer带有滚动页脚的全高内容
【发布时间】：2015-03-31 10:21:32
【问题描述】：

我有以下设置：

标题，内容 - 需要是浏览器的全高，和页脚

下面的当前设置是我想要的（当浏览器完全打开时）。基本上内容 div 应该有 100% 的高度，你只需滚动查看页脚。您滚动的量取决于页脚的高度。内容将是一个简单的登录表单。我添加了一个固定高度的 div 来演示我的问题（登录 div 可以是任何高度）。然而，问题是当浏览器垂直调整大小时。这是解释的棘手点：

我的问题是如何防止页脚与内容 div 重叠？我希望页脚捕捉到内容 div 的底部。随着浏览器窗口变短，我希望内容 div 仍然保持 100% 的高度。浏览器将剪切内容 div，因为它垂直变短（这很好），但我想要内容 div 下方的页脚，并且仍然希望只能滚动到页脚的高度。

我想我在某个地方缺少 margin-bottom 但不太确定在哪里。有人可以帮忙解决这个问题。提前致谢。

html:

<body>


    <div class="wrapper">

        <div class="content">

            <div class="loginPanel">

            </div>

        </div>

    </div>

    <div class="footer">
        footer, hidden until scrolled
    </div>


</body>

CSS：

html, body {
height:100%;
padding:0;
margin:0;
}

.wrapper {
height:100%;
background:orange;
}

.content {
background:grey;
width:100%;
height:100%;
}

.footer {
background:purple;
height:200px;
width:100%;
color:#fff;
}

.loginPanel {
width:600px;
height:300px;
background:green;
margin:0 auto;
}

【问题讨论】：

标签： html css

【解决方案1】：

您应该能够通过以下方式实现您想要的：

html, body {
    height:100%;
    padding:0;
    margin:0;
    position:relative;
}
.wrapper {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
.content {
    background:grey;
    width:100%;
    min-height:100%;
}
.footer {
    height:200px;
    width:100%;
}
.loginPanel {
    width:600px;
    height:300px;
    background:green;
    margin:0 auto;
}

<div class="wrapper">
    <div class="content">
        <div class="loginPanel"></div>
    </div>
    <div class="footer">footer, hidden until scrolled</div>
</div>

【讨论】：

【解决方案2】：

您可以尝试将margin-bottom 添加到<body> 或<html> 元素；这应该可以解决您的问题。

【讨论】：

【解决方案3】：

<div class="page-wrap">

  Content!

</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

CSS

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}

【讨论】：

感谢您的回复。我已经向您转发了指向我想要实现的目标的链接。对不起，如果我的解释不是很好。在下面的链接中，您在开始滚动之前看不到页脚。感谢您的帮助ironsummitmedia.github.io/startbootstrap-full-slider