Question

我有一个盒子（购物车），我希望它固定在页面底部。但是如果页面不够长，或者用户滚动到页面的末尾，那么页脚就在视口中。在这种情况下，我希望购物车盒位于页脚的正上方。

没有JS可以做到吗？

由于

Answer 1

只回答有趣的事情，你应该在javascript上进行转发以使其稳定。

position:sticky，浮动伪和display重置可能存在风险。

aside,
footer {
  position: sticky;
  bottom: 0;
  background: white;
  border: solid;
  clear: both;
  z-index: 1;
}
footer {
  z-index: 0;/*hide it from aside */
}
html:before {/* push sticky elements down */
  content: "";
  float: left;
  height: 100vh;
}
body {
margin:0;
  display: inline;/* get body scrolling and block formatting context off the game */
}

<main>main<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> end main</main>
<aside>aside at bottom !</aside>
<footer>footer</footer>

你可以玩一点并用内容测试it，但重要的是，它不可靠，粘性没有在任何地方实现，行为可以从浏览器变为另一个，从最新的更新到另一个意想不到的方式。

Answer 2

你的问题不是很清楚，所以我会尽量按照我的理解来回答。

让您的页脚坐在短页的底部

为了达到这个效果， flexbox 非常方便。首先，设置 body的风格为：
```
display:flex; 
flex-direction: column;
min-height: 100vh;
```
设置display:flex会使页面上的所有子元素（即body标记中的 flex项目）生成，因此我们可以为这些元素设置样式。将flex-direction设置为列还可确保body的所有子元素垂直堆叠。

现在，min-height: 100vh;使身体跨度至少为视口高度的100％。

获取一个元素（在这种情况下是你的购物车盒。让我们从这里开始称它为.shopping-cart-box）到＃34;推送＆＃34;页脚到视口底部，然后可以将其设置为flex（或flex-grow，准确）值为1.这使得它占用了剩余的可用空间。

请记住，身体处于视口高度的 100％。如果您的导航菜单占用，例如 10％，并且页脚分别占据视口高度的 5％，那么带有flex: 1;的.shopping-cart-box然后将填充 85％视口高度的其余部分，基本上是＃34;推动＆＃34;页脚到页面底部。
让您的购物车框位于页脚顶部
现在我们底部的页脚和.shopping-cart-box占用了剩余的可用空间，我们需要强制其内容对齐底部。

我们可以通过将
```
display: flex; 
flex-direction: column;
```
添加到.shopping-cart-box来实现。这再次允许我们将.shopping-cart-box的所有子元素视为弹性项目。

假设我们在.shopping-cart-box中有一个子元素.shopping-cart-product，我们可以通过两种方式将它对齐到其父容器的底部：使用

margin-top: auto

align-self: flex-end

可以使用提供的代码段找到可视化表示：

＆＃13;

/* RELEVANT CODE*/
.body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.shopping-cart-box {
  display: flex;
  flex: 1;
}

.shopping-cart-product {
  margin-top: auto; /* or align-self: flex-end; */
}












/*CODE FOR AESTHETICS */

.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.nav {
  display: flex;
  flex-direction: row;
  padding: 12px;
}

.logo {
  display: block;
  margin-right: auto;
}



/* Footer */ 
.footer {
  background-color: #013940;
  padding: 18px 12px;
  color: white;
  margin-top: 6px;
}

.ui.item.menu,
.ui.item.menu .item {
  width: 40% !important;
  margin: 0;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet" />

<body class="body">
  <header>
    <nav class="nav">
      <a href="#" class="logo">
        <h1>
          ShopperStack</h1>
      </a>

      <ul class="ui two item menu nav--links">
        <li class="item">
          <a href="#">Home</a>
        </li>
        <li class="item">
          <a href="#">About</a>
        </li>
      </ul>
    </nav>
  </header>


  <div class="container">
    <p>
      This is a block of text on the upper part of the page
    </p>
  </div>


  <div class="shopping-cart-box">
    <div class="shopping-cart-product container">
      <form action="" class="ui segment form">
        <div class="field">
          <h3 class="header">Place Order</h3>
          <p class="label">ACME SuperBlaster 4000</p>
          <input type="submit" value="Buy Now" class="ui button">
        </div>
      </form>
    </div>
  </div>

  <footer class="footer">
    <section class="container">
      <h3>Thanks for visiting ShopperStack!</h3>
    </section>
  </footer>

</body>

＆＃13;

如何在页面底部放置一个div修复程序＆amp;＆amp;上面的页脚使用CSS

2 个答案: