Question

我一直在Squarespace网站上工作，很多模板都没有页脚。我需要版权和隐私政策链接，因此需要这个页脚。

幸运的是，人们可以使用'代码注入'工具调整基本模板，我一直在使用[这个很棒的答案] [1]提供的代码，但是当调整到平板电脑或移动屏幕大小时，页脚最终会在页面中间。

我已尝试调整代码以使用

position: fixed; bottom: 0:

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

EDITED 下面的代码运行完美，并在Squarespace（手机，平板电脑，网络）上的所有视图中保持页面底部的页脚：

<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 */
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

将响应页脚添加到可跨设备类型工作的Squarespace页面

1 个答案: