Question

我有以下设置：

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

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

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

我认为我在某个地方缺少保证金，但不太确定在哪里。有人可以帮助解决这个问题。提前谢谢。

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

Answer 1

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

Answer 2

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

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

滚动页脚的全高内容

3 个答案: