页脚粘在底部，但在浏览器调整大小时，页脚被推到内容之上

Question

这是 link 代码笔 http://codepen.io/Kwits/pen/mVRqbx?editors=110

所以这是一个两栏布局，我打算在两栏的底部都有一个页脚。左栏是固定的，而右栏是可滚动的。

问题是如果浏览器高度被拉高，页脚也会随之而来。理想情况下，我会让它在导航 div 之前停止。

感谢任何帮助，我已经坚持了几个小时。

这是我的HTML

<div class="left">
  <header>
    <div class="logo">
      <img src="images/Logo.png" alt="">
      <h1 id="logo_title">Business name</h1>
    </div>
  </header>

  <ul class="nav">
    <li>
      <a href="index.html"><img src="images/home_btn.png" class="home"></a>
    </li>
    <li>
      <a href="about.html"><img src="images/about_btn.png" class="about"></a>
    </li>
    <li><img src="images/curriculum_btn.png"></li>
    <li><img src="images/contact_btn.png"></li>
  </ul>

  <div class="footer-left">
    <p>Address</p>
    <p>City</p>
    <p>Post Code</p>
    <p>Phone Number</p>
  </div>
</div>
<div class="right">
  <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
    you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary
    of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc..</p>
</div>

这是 CSS

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

.right {
  height: 100%;
  position: absolute;
  border-left: 2px solid grey;
  background: #74C279;
  overflow: auto;
  z-index: 0;
  left: 303px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 50px;
}

.left {
  border-right: 5px solid gray;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 300px;
  background: #F0C090
}

.footer-left {
  width: 100%;
  position: absolute;
  bottom: 0;
  font-size: 22px;
  line-height: 10px;
  text-align: center;
}

Answer 1

你需要有一个 javascript 函数设置左列的 min-height 等于 .left headers 高度 + .left navs 高度 + .left .footer-left身高。此函数必须运行在页面加载和任何可能更改 left

的三个子项中的任何一个的高度的事件上

在尝试编写一个 js 函数来为所有情况动态调整 CSS 时，我意识到使用 flexbox 可以更轻松地实现这一点。这里是 a solution。相关代码：

.left {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.left .nav {
  flex-grow: 1;
}

请注意，我还从 .footer-left 中删除了 position 属性。如果在 .left 中添加任何其他元素，则应将 flex-grow: 1 应用于 .footer-left 之前的最后一个子元素。这告诉该元素根据需要增加高度，以便页脚保持向下。

Answer 2

在您的情况下，您可以指定 min-height（以像素为单位），它将像这样工作 fixed your sample

只需了解您的用户将使用什么设备popular screen resolutuions

其他解决方案

是在 fixed 和 absolute 旁边使用 calc 定位页脚。通常你指定

body
    min-height: $minimum-site-height

.left
    min-height: 100vh - $footer-height

额外

这不是问题的解决方案，而是避免问题的一种选择。您可以指定页脚 background 并添加额外的 box-shadow。 Prof of concept

页脚粘在底部，但在浏览器调整大小时，页脚被推到内容之上

Footer sticking to bottom, but upon browser resize the footer is pushed on top of content

html

css

position

footer

absolute