CSS веб-компонент в качестве нижнего колонтитула - PullRequest
Новая
       16

CSS веб-компонент в качестве нижнего колонтитула

0 голосов
/ 28 июня 2019

Я пытаюсь создать общий нижний колонтитул, используя полимер (веб-компонент).

Очевидно, что нижний колонтитул должен быть прикреплен к нижней части страницы, чего я могу добиться, используя положение, зафиксированное с нижним 0px.

Проблема с этим подходом заключается в том, что когда я перетаскиваю свой компонент нижнего колонтитула на страницу, он не занимает места.

Как мне добиться этого, чтобы страница хостинга не должна былазнать что-либо о размерах нижнего колонтитула и по-прежнему правильно разметка.Т.е. нижний колонтитул естественным образом занимает место на странице хостинга, как если бы нижний колонтитул был статическим.

1 Ответ

1 голос
/ 28 июня 2019

Поскольку ваш компонент нижнего колонтитула будет position:static, вам нужно будет добавить один компонент <div> либо непосредственно перед ним, либо сразу после него.И тогда ваш компонент может, используя JS, получить свою собственную высоту и присвоить эту высоту новой <div>, которая позволит странице прокручиваться за нижним колонтитулом.

Следующий код не является веб-компонентом, ноне имеет значения.Это показывает, что, добавив последний 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>
...