Question

我正在尝试使用聚合物（webcomponent）构建通用页脚。

显然，页脚需要附加到页面底部，我可以使用固定在底部0px的位置来实现。

这种方法的问题在于，当我将页脚组件放到页面中时，它不会占用任何空间。

如何实现此目的，以便托管页面不必知道有关页脚尺寸的任何信息，并且仍然可以正确布局。也就是说，页脚自然会从托管页面中获取空间，就好像页脚位置是静态的一样。

Answer 1

由于页脚组件将为position:static，因此您需要在组件之前或之后添加单个<div>。然后，您的组件可以使用JS导出其自身的高度，并将该高度分配给新的<div>，该高度将允许页面滚动到页脚上方。

以下代码不是Web组件，但无关紧要。它表明，通过添加与页脚高度相同的最终div，您将可以滚动查看正文的全部内容。

该代码的第二个副本未添加多余的div，并且您看不到文本的最后一行。

document.body.onload = () => {
  const footer = document.querySelector('footer');
  const content = document.querySelector('.content');
  const {height} = footer.getBoundingClientRect();
  const div = document.createElement('div');
  div.style.height = `${height}px`;
  content.append(div);
}

footer {
    background: #ddd;
    border-top: 1px solid black;
    bottom: 0;
    margin: 0 -5px;
    padding: 10px;
    position: fixed;
    width: 100%;
}

.last {
  border: 1px dashed red;
  margin: 0;
}

<div class="content">
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p class="last">This is the last line of the body</p>
</div>
<footer>
  This is the footer section
  <div style="text-align: center">Copyright (c) 2019 some company</div>
</footer>

这一行不允许您看到最后一行：

footer {
    background: #ddd;
    border-top: 1px solid black;
    bottom: 0;
    margin: 0 -5px;
    padding: 10px;
    position: fixed;
    width: 100%;
}

.last {
  border: 1px dashed red;
  margin: 0;
}

<div class="content">
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p>This is the content of the page. jdlskaj kld jsalkj dlsaj djslak jdjsa djlask jdkasj djasl djasl djaskjd kasjd asjdlk jaskld jaslkjd alksjd askjd lkjflsd fjkhsa fhskjfh dskfhdsjk hfjh dfkjhdas fhdaskj fhdsklajf hkjsahf kjsdahf jksahf kjsdahf afkj hdsakjfh sdkajhf dsakjhfkdjsahfkjdsah fksjalhf sladk</p>
  <p class="last">This is the last line of the body</p>
</div>
<footer>
  This is the footer section
  <div style="text-align: center">Copyright (c) 2019 some company</div>
</footer>

CSS WebComponent作为页脚

1 个答案: