Question

以下是codepen http://codepen.io/Kwits/pen/mVRqbx?editors=110

的链接

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

问题是如果浏览器高度被拉高，页脚会随之而来。理想情况下，我会在nav 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

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

了解您的用户将使用哪种设备popular screen resolutuions

其他解决方案

使用fixed旁边的calc和absolute页脚的定位。通常，您指定

body
    min-height: $minimum-site-height

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

<强>附加

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

Answer 2

您需要设置一个javascript函数，将左列的min-height设置为.left header的高度+ .left nav的高度+ .left .footer-left的高度。此函数必须在页面加载和任何可能更改left

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

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

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

请注意，我还从position删除了.footer-left媒体资源。如果您在.left中添加任何其他元素，则应将flex-grow: 1应用于.footer-left之前的最后一个孩子。这告诉元素在高度上增长所需的数量，以便页脚保持向下。

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

2 个答案: