向跨设备类型工作的 Squarespace 页面添加响应式页脚

Question

我一直在 Squarespace 网站上工作，他们的很多模板都没有页脚。我需要版权和隐私政策 link 所以需要这个页脚。

幸运的是，可以使用 'code injection' 工具调整基本模板，我一直在使用 [this great answer][1] 提供的代码，但是当调整到平板电脑或手机屏幕尺寸时，页脚结束在页面中间。

我试过调整代码以使用

position: fixed; bottom: 0:

正如其他一些答案所建议的那样，但问题仍然存在，无论屏幕大小如何，仍然无法将页脚固定到页面底部。

已编辑 下面的代码完美运行，并在 Squarespace（phone、平板电脑、网络）上的所有视图的页面底部维护一个页脚：

<style>
.box {
  width: 100%;
  height: 10vh;
  background: #fcfcfc;
  overflow: auto;
}

#coverFooter {
  position: relative;
  z-index: 1;
  /* top: 100%;  */
  bottom: 0px;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #fcfcfc;
  box-sizing: border-box;
  text-align: center;
  padding-right: 30px;
  padding-left: 30px;
  /* Use this for right aligned text instead.
        text-align: right;
        padding-right: 60px;
        padding-left: 60px;
        */
}

#coverPP {
  white-space: nowrap;
}

#coverCR {
  margin-left: 10px;
  white-space: nowrap;
}
</style>

<div class="box">
  <div id="coverFooter">
    <span id="coverCR">&copy; 2017 Your Business</span>
  </div>
</div>

Answer 1

只需尝试以下 css 部分

根据您的需要 - fiddle link

添加css

 .box {
   width:100%;
   height:calc(100vh - 60px);
   background:tomato;
   overflow:auto;
 }

删除部分

#coverFooter {
   /* top: 100%;  */ 
   bottom:0px; /* Add this */
}

.box {
  width: 100%;
  height: calc(100vh - 60px);
  background: tomato;
  overflow: auto;
}

#coverFooter {
  position: fixed;
  z-index: 1;
  /* top: 100%;  */
  bottom: 0px;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #000;
  box-sizing: border-box;
  text-align: center;
  padding-right: 30px;
  padding-left: 30px;
  /* Use this for right aligned text instead.
        text-align: right;
        padding-right: 60px;
        padding-left: 60px;
        */
}

#coverPP {
  white-space: nowrap;
}

#coverCR {
  margin-left: 10px;
  white-space: nowrap;
}

<div class="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellat totam recusandae pariatur nemo molestias accusantium doloribus. Praesentium distinctio dicta assumenda, consequuntur tempora eos eveniet ex magnam nobis, aperiam hic?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellat totam recusandae pariatur nemo molestias accusantium doloribus. Praesentium distinctio dicta assumenda, consequuntur tempora eos eveniet ex magnam nobis, aperiam hic?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellat totam recusandae pariatur nemo molestias accusantium doloribus. Praesentium distinctio dicta assumenda, consequuntur tempora eos eveniet ex magnam nobis, aperiam hic?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellat totam recusandae pariatur nemo molestias accusantium doloribus. Praesentium distinctio dicta assumenda, consequuntur tempora eos eveniet ex magnam nobis, aperiam hic?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellat totam recusandae pariatur nemo molestias accusantium doloribus. Praesentium distinctio dicta assumenda, consequuntur tempora eos eveniet ex magnam nobis, aperiam hic?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellat totam recusandae pariatur nemo molestias accusantium doloribus. Praesentium distinctio dicta assumenda, consequuntur tempora eos eveniet ex magnam nobis, aperiam hic?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellat totam recusandae pariatur nemo molestias accusantium doloribus. Praesentium distinctio dicta assumenda, consequuntur tempora eos eveniet ex magnam nobis, aperiam hic?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellat totam recusandae pariatur nemo molestias accusantium doloribus. Praesentium distinctio dicta assumenda, consequuntur tempora eos eveniet ex magnam nobis, aperiam hic?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellat totam recusandae pariatur nemo molestias accusantium doloribus. Praesentium distinctio dicta assumenda, consequuntur tempora eos eveniet ex magnam nobis, aperiam hic?
  </p>
  <div id="coverFooter">
    <a id="coverPP" href="/privacy-policy/">Privacy Policy</a> <span id="coverCR">&copy; 2016 Your Company, LLC</span>
  </div>
</div>

向跨设备类型工作的 Squarespace 页面添加响应式页脚

Adding a responsive footer to a Squarespace page that works across device types

html

css

footer

squarespace