Жёстко зафиксированная страница без теней вверху и внизу.

Речь, конечно, о странице сайта. В качестве примера, можно посмотреть страницу от Google Здесь1. На ней нет ни вертикального, ни горизонтального скролла. Обычные же, имеют почти всегда вертикальное и могут иметь горизонтальное смещение.

О каких тенях разговор?
Мы двигаем содержимое страницы сайта. Когда страница прокручена до конца, а её продолжают прокручивать дальше, то появляется тень.

В этом нового ничего нет, но как зафиксировать страницу? Об этом далее. Для новичков.

В начале я решил усложнить задачу и добавить к примеру от Google шапку и подвал сайта NewLAN60.ru . Не получилось. Потом понял, что на закреплённых страницах шапка и подвал лишние. Посмотрите второй пример Здесь2. В первом и во втором случаях, после строки браузера сразу текст.

После вступления, к коду. Начнём с простого шаблона HTML.

<!DOCTYPE html>
  
<html lang="ru">

<head>

<meta charset="utf-8">

<title>Жёстко зафиксированная страница без теней вверху и внизу.</title>

<link rel="stylesheet" href="../css/lanstyle44.css">

</head>

<body>

<img src="foto26.png" alt="Картина, ёжик с яблоками">

<p>Ежи – это небольшие милые зверьки, которые знакомы нам всем с детства.     
При этом не обязательно отправляться в поле или в лес, чтобы увидеть их. Довольно 
часто их можно увидеть во дворе частного дома или в пределах дачного участка. 
Наиболее отчаянных особей запросто можно встретить в пределах городов.</p>

<p>Ежи представляют семейство ежовых и отряд насекомоядных. Они являются 
наиболее популярными персонажами детских произведений, а также мультфильмов. 
У зверька достаточно плотное телосложение, которое покрыто колючими иголками, 
между которыми растут редкие волоски. Как правило, ежи сворачиваются в клубок в 
случае опасности, что возможно благодаря верхнему слою кожи, которая способна 
значительно растягиваться.</p>


</body>
 
</html>

Чтобы зафиксировать страницу в браузере, когда она прокручивается до конца, можно использовать следующие 3 способа.

1. Использование CSS.

Добавьте следующий код в CSS вашего сайта: body {overflow: hidden;} Этот код запрещает прокрутку страницы по вертикали и горизонтали.

Файл стилей lanstyle44.css будет таким: body {overflow: hidden; font-family:Arial, Helvetica, sans-serif; font-size: 1.2em;} img {width:25%; float: left; margin:0 2em 1em 0;} Результат можно посмотреть Здесь3. Страница "примёрзла".

2. Использование JavaScript.

Добавьте следующий код в JavaScript вашего сайта: document.body.style.overflow = "hidden"; Этот код также запрещает прокрутку страницы по вертикали и горизонтали.

Если использовать JavaScript, то в файл HTML нужно добавить <script>document.body.style.overflow = "hidden";</script> При этом, из файла CSS убрать overflow: hidden; Результат открытия в браузере, будет таким же.

3. Использование HTML.

Добавьте следующий код в HTML вашего сайта: <body style="overflow: hidden;"> Этот код также запрещает прокрутку страницы по вертикали и горизонтали.

Можно использовать глобальный атрибут style для тега body, то есть <body style=''overflow: hidden;''>……</body> При этом, из файла CSS убрать overflow: hidden;

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