Как установить оверлей на странице в соответствии с высотой страницы с помощью CSS

Question

На моем веб-сайте я хочу установить наложение над страницей, когда JavaScript отключен. Поскольку высота каждой страницы различна, поэтому я не могу установить наложение в зависимости от высоты страницы. В настоящее время я делаю то, что Я устанавливаю фиксированную максимальную высоту 2000 пикселей следующим образом:

.overLay { цвет фона: # 666666; высота: 2000px; Слева направо: 0; позиция: абсолютная; верх: 0; ширина: 100%; Z-индекс: 1003; непрозрачность: 0,5; }

Но это не то, что я хочу. Потому что некоторые страницы имеют очень меньшую высоту, чем упомянутая высота наложения, а некоторые страницы имеют больше, поэтому наложение не очень эффективно в этом случае. Я хочу установить высоту наложения в соответствии с высотой страницы. Может кто-нибудь сказать мне, как я могу добиться этого без использования JavaScript?

Answer 1

body,html { height:100%; width:100%; padding:0; margin:0; }
.overlay  { position:absolute; top:0px; left:0px; z-index:999; height:100%; width:100%; background:#c1c1c1; }

Это должно работать. Наложение должно быть <div>.

Answer 2

У этого вполне могут быть другие побочные эффекты в зависимости от вашего контента или чего-то еще ... но вы, возможно, могли бы использовать

body {
  overflow:hidden;
}

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