Я только что начал свой первый правильный HTML-сайт для друга, и мне было интересно, как я смогу получить сайт для автоподготовки страницы?
Это ландшафтный дизайн, который не нуждается в прокрутке.
Вы должны установить body и html в position:fixed;, а затем установить right:, left:, top: и bottom: до 0;. Таким образом, даже если содержимое переполняется, оно не будет проходить за пределы области просмотра.
Например:
<html>
<body>
<div id="wrapper"></div>
</body>
</html>
CSS
html, body, {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
}
Caveat. Используя этот метод, если пользователь уменьшит свое окно, содержимое будет отключено.
Если в ландшафте вам понадобится больше ширины и меньше высоты! Это то, что все веб-сайты имеют.
Давайте сначала с базовым, затем с остальным!
Основной CSS:
С помощью CSS вы можете сделать это,
#body {
width: 100%;
height: 100%;
}
Здесь вы используете div с телом id, как:
<body>
<div id="body>
all the text would go here!
</div>
</body>
Тогда у вас может быть веб-страница с высотой и шириной 100%.
Что делать, если он пытается изменить размер окна?
Проблемы возникают, если он пытается изменить размер окна? Тогда все элементы внутри #body будут пытаться испортить интерфейс. Для этого вы можете написать это:
#body {
height: 100%;
width: 100%;
}
И просто добавьте min-height max-height min-width и max-width.
Таким образом, элемент страницы будет оставаться в месте, где они находились при загрузке страницы.
Использование JavaScript:
Используя JavaScript, вы можете управлять пользовательским интерфейсом, использовать jQuery как:
$('#body').css('min-height', '100%');
И все остальные остальные свойства CSS, а JS позаботится о пользовательском интерфейсе, когда пользователь пытается изменить размер окна.
Как не добавлять прокрутку к веб-странице:
Если вы не пытаетесь добавить свиток, вы можете использовать этот JS
$('#body').css('min-height', screen.height); // or anyother like window.height
Таким образом, документ будет получать новую высоту, когда пользователь загрузит страницу.
Второй вариант лучше, потому что, когда пользователи будут иметь разные разрешения экрана, им нужен лист CSS или стиля, созданный для собственного экрана. Не для других!
Совет.. Попробуйте использовать JS, чтобы найти текущий размер экрана и отредактировать страницу!:)
вы можете использовать css, чтобы сделать это, например
<style>
html{
width:100%;
height:100%;
}
body{
width:100%;
height:100%;
background-color:#DDD;
}
</style>