как создать фиксированный нижний колонтитул с видимым основным контентом и скрытым дополнительным контентом ниже, видимым только после прокрутки вниз с помощью css - PullRequest
Новая
       7

как создать фиксированный нижний колонтитул с видимым основным контентом и скрытым дополнительным контентом ниже, видимым только после прокрутки вниз с помощью css

0 голосов
/ 12 июня 2018

как создать нижний колонтитул с основным содержимым, всегда видимым с фиксированным основанием и дополнительным содержимым, скрытым снизу, видимым только после прокрутки вниз.используя css. 

<html>
  <head>
  </head>
  <body>
    <header></header>
    <main></main>
    <footer>
      primary content - this should be visible always (fixed) [copyright, logo etc.]
      ...
      extra content - initially hidden this should be visible only  when scrolled to bottom [extra links, careers link, policies link etc.]
    </footer>
  </body>
</html>

1 Ответ

0 голосов
/ 12 июня 2018

Если вам нужно решение только для CSS / HTML (без JavaScript), вы можете использовать position:sticky.Для этого вам необходимо вставить абзац, который вы хотите всегда показывать, внизу в конце элемента main: 

<html>
<head>
<style>
body{
margin:0
}
#alwayshow{
position:sticky;
bottom:0;
display:block;
background:#000;
color:#fff;
padding:2px;
}
</style>
</head>
<body>
<header></header>
<main>
<div>
content goes here ...
</div>
<div id="alwayshow">primary content - this should be visible always (fixed) [copyright, logo etc.]</div>
</main>
<footer>
extra content - initially hidden this should be visible only  when scrolled to bottom [extra links, careers link, policies link etc.]
</footer>
</body>
</html>

. Обратите внимание, что позиция закрепления относительно нова.

...