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

我一直在Squarespace网站上工作，其中很多模板没有页脚。我需要一个版权和隐私政策链接，所以这个页脚是必需的。将响应页脚添加到可跨设备类型工作的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>

来源

2017-06-27 BLL27

刚刚尝试下面的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>

来源

2017-06-27 04:35:44 LKG

感谢您抽出时间来回答。我不想将页脚固定在屏幕的底部，我正在寻找它固定在页面的底部，以便它可以向下滚动。另外，我不需要在它上面添加任何文本。页面上的内容 - 页脚上方 - 以Squarespace组件的形式处理。 – BLL27

然后改变固定为相对和框高的位置为100vh – LKG

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

回答

相关问题