html - 对齐固定页脚中的内容

Question

我正在尝试编写一个简单的下载页面，但我得不到我想要的。

一张图顶一千字，所以我画下了我想要得到的东西:

现在，我想出了如何:

• 保持盒子固定在底部，同时
• 保持页面可滚动

但是我不明白如何让标题和按钮在不同的边对齐，以及“页脚”的内容垂直对齐......

这是实际的“代码”...

* {
  padding: 0;
  margin: 0;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  position: relative;
  margin: 5px;
}

::-webkit-scrollbar-track {
  box-shadow: #fff;
}

::-webkit-scrollbar-thumb {
  background-color: #222;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  background: #fff;
  color: #222;
  font-family: "Gotham SSm A";
  text-align: center;
  display: table;
  margin: auto;
}

p {
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  text-transform: uppercase;
  width: 100%;
  margin: auto;
  left: 0;
}

a {
  transition: 0.2s all;
  text-decoration: none;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  font-family: "Gotham SSm A";
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  background: #fff;
  color: #222;
  border-radius: 2px;
  border: 0;
}

.button:hover,
.button:focus {
  color: #fff;
  background: #F9BF3B;
}

.download {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 1%;
  min-height: 50px;
  height: 15%;
  width: 100%;
  background: #fafafa;
  box-shadow: 0 0 15px 0 rgba(153, 153, 153, 0.5);
}

.left, .right {
  display: inline-block;
}

<div class="download">
  <div class="left">
    <p>left-aligned text</p>
  </div>

  <div class="right">
    <a href="#" class="button">button</a>
  </div>
</div>

Answer 1

编织 Preprocessors : http://kodeweave.sourceforge.net/editor/#6a3f265ea39a9e4c296718eb64e08ecf
编织: http://kodeweave.sourceforge.net/editor/#b3ebebb74666da608e8d8a19f2a1690d

总是尽量保持你的代码DRY !

考虑到您是新手，在回答您的问题之前，我要指出一些事情。 (但首先结帐 Common CSS questions )

您的代码中存在一些错误，请记住...
众所周知，通用选择器 * 速度很慢(只有在绝对必要时才使用它，因此最好尽可能避免使用它)。 注意:默认情况下，html 和 body 标签的宽度为 100%。

您应该始终在您的元素中使用一个好的 CSS 重置库(Normalize 是我个人的最爱)。这为您省去了为在其他浏览器上工作的元素设置样式的大部分麻烦。
至于 CSS3，你需要像 Prefix-free 这样的东西。或 Autoprefixer到...

Break free from CSS prefix hell!

话虽如此。

我做的第一件事就是将页脚内容居中。

在这种情况下，使用 margin、translate、position relative 和 top 将您的内容居中是不好的做法垂直文本。 (使用它的唯一相关原因是按钮上的字体 || font-size 与默认文本不同，但在这种情况下它不是所以不要使用它!(记住 DRY )

要垂直对齐文本，您可以使用 display table , display table-cell 和 vertical-align middle

在这种情况下，最好使用 text-align而不是 float .

用 display table 表示和 positioning the footer at the bottom . <知识库> see code 我能够减少对 clear 的不必要使用, margin和 padding .

@import url('https://fonts.googleapis.com/css?family=Montserrat');
html, body {
  height: 100%;
}

/* Content Padding */
.content {
  padding: 1em;
}

/* Position and Style Footer */
.download {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 1em;
  background: #fff;
  box-shadow: 0 0 1.056em rgba(0, 0, 0, 0.5);
}
/* Footer Typography */
.download, .button {
  font-family: "Montserrat";
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  text-decoration: none;
}
/* Margin Button to Center */
.button {
  color: #000;
  padding: 10px 22px;
  border-radius: 0.4em;
  transition: all .2s ease;
}
.button:hover {
  color: #fff;
  background: #F9BF3B;
}

/* Vertically Align Content */
.table {
  display: table;
  width: 100%;
  height: 100px;
}
.cell {
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}

/* Variable Classes */
.left {
  text-align: left;
}
.right {
  text-align: right;
}

/* Styles Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  position: relative;
  margin: 5px;
}
::-webkit-scrollbar-track {
  box-shadow: #fff;
}
::-webkit-scrollbar-thumb {
  background-color: #222;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/>
<script src="https://leaverou.github.io/prefixfree/prefixfree.js"></script>

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa praesentium velit quas esse itaque voluptate eos alias deserunt veniam, molestias exercitationem, maiores sed et vitae, iusto autem cum eaque? Maxime.</p>
  <p>Rerum, tempore, debitis! Ducimus perferendis qui doloribus ab, deleniti error cumque eaque consequatur soluta. Quidem incidunt, commodi qui soluta sed aut suscipit, nisi dolore. Tempora ipsa ut quod ipsum autem!</p>
  <p>Illo nisi eos quam neque adipisci a id autem sed distinctio, recusandae iure rem maiores, facere fugiat, harum sit reprehenderit dignissimos quaerat ut. Necessitatibus iure, suscipit blanditiis ipsum consectetur! Illum!</p>
  <p>Magnam autem dicta architecto necessitatibus accusamus expedita, at, accusantium nobis dolorem repellat vero earum beatae sunt iusto aut veritatis numquam deserunt blanditiis officia nihil! Ad, amet consectetur maiores quia earum?</p>
  <p>Nisi libero voluptatibus modi facere laboriosam ex provident. Quae dolorem tempore rem quia voluptate nisi consequuntur rerum earum fugiat neque, aperiam, iste culpa deserunt eligendi eos aspernatur ex harum ea.</p>
  <p>Adipisci, itaque ullam! Quis culpa tempora sunt dignissimos eaque porro laudantium excepturi, fugit quasi ex dolor repellendus neque magnam repellat fuga aliquid odio, veniam dicta cumque, laborum placeat rem commodi.</p>
  <p>Ad sunt optio nostrum, distinctio repellendus dignissimos, cum aut quos sed excepturi, nulla qui molestias? Ad quia, eligendi! Quam facilis consequatur laboriosam, adipisci et. Debitis ea facere ullam iure repellendus?</p>
  <p>Laborum, distinctio necessitatibus. Odit voluptatem fugit sint voluptates rem distinctio animi nihil beatae, molestiae explicabo tempora vero quam! Quidem autem itaque eos ratione voluptatum veritatis eveniet vitae aperiam aut voluptates?</p>
  <p>Soluta eos tempore, eum ducimus pariatur repellendus quaerat praesentium laudantium? Molestias laborum odio ratione temporibus rem id, excepturi magnam delectus facilis quibusdam quaerat exercitationem veniam vero architecto provident dolore sed.</p>
  <p>Quia, debitis odit obcaecati mollitia sunt enim natus ipsum, beatae corporis laborum id provident velit laudantium eveniet, fugiat. Velit minus ipsum nihil nemo, eos vero, soluta quos ab accusamus obcaecati.</p>
  <p>Nam quis, esse iure aliquid? Rem temporibus nemo aspernatur cupiditate accusamus, explicabo totam laboriosam odit magni quaerat maxime culpa vitae! Repellat velit quos eaque temporibus, tempore neque odio ex deserunt?</p>
  <p>Eveniet, unde quas debitis rem laboriosam cumque praesentium animi veniam temporibus ullam ipsam modi minima iusto repellat, tenetur reiciendis dolorum, officia dolor possimus. Esse quidem vitae perspiciatis velit a fuga.</p>
</div>

<div class="table">
  <div class="download">
    <div class="cell left">
      <p>left-aligned text</p>
    </div>

    <div class="cell right">
      <a class="button" href="javascript:void(0)">button</a>
    </div>
  </div>
</div>