Блог

Главная - Вопросы по программированию - страницы всегда 100% высоты и 100% ширины

страницы всегда 100% высоты и 100% ширины

#css

#css

Вопрос:

Как можно создать одностраничный веб-сайт с разными страницами, каждая из которых имеет 100% ширину и 100% высоту? Моим первым решением было бы фиксированное значение, но я хочу, чтобы оно масштабировалось до размера экрана. Чтобы каждая страница имела размер экрана. Обратите внимание, что это должна быть «одна страница», чтобы страницы были друг под другом.

Спасибо за вашу помощь!

Комментарии:

1. Непонятно, о чем вы спрашиваете. Вы спрашиваете, возможно ли это? Да, это так. Но что вы действительно хотите знать?

2. Как может one page быть 100% высоты окна браузера?

3. Вам нужен одностраничный многостраничный сайт? И вас беспокоит высота и ширина?

4. Мне трудно объяснить. Но я хочу одностраничный дизайн веб-сайта. Но у которого есть 4 страницы под каждой другой. Как список или что-то в этом роде. Но я хочу, чтобы каждая страница идеально подходила для экрана. Например, я не хочу видеть все 4 страницы, когда я нахожусь на 27-дюймовом экране. Нет, я все еще хочу 1 полную страницу, и мне нужно прокрутить вниз, чтобы увидеть другую. Поэтому он должен быть отзывчивым. Так что не имеет значения, на каком экране я смотрю на это. Извините за расплывчатый вопрос и ответ

Ответ №1:

Это код, который вам нужен:

 <!DOCTYPE html>
<html>
<head>
    <style>
    body { margin: 0; padding: 0; }
    #parent { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
    #parent div { height: 100%; width: 100%; }
    #parent div:nth-child(1) { background: red; }
    #parent div:nth-child(2) { background: green; }
    #parent div:nth-child(3) { background: blue; }
    #parent div:nth-child(4) { background: orange; }
    </style>
</head>
<body>
    <div id="parent">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

Все разделы внутри #parent имеют высоту 100%. Даже если вы измените размер экрана.
Протестировал его в Chrome, IE и Firefox.

Комментарии:

1. Это именно то, что я искал! Большое вам спасибо, сэр!

2. Нет проблем 🙂 не могли бы вы пометить это как принятый ответ, нажав на знак «проверить»? Помогло бы другим с той же проблемой. Спасибо

3. Конечно, я это сделаю 😉

Ответ №2:

Зависит от того, как вы хотите его создать и изменить его размер. Это отзывчиво? Если это так, убедитесь, что вы используете фреймворк, который его поддерживает.

Кроме того, начните со следующего в вашем CSS

 body, html              {height: 100%;width: 100%;}

Это всегда будет заполнять ваш экран на 100% телом. Теперь ваш второй вопрос. Вы хотите заполнить каждую страницу? Потому что ты меня там потерял. Содержимое может меняться, поэтому не всегда может поместиться на 100% высоты и ширины (подумайте о смартфонах, иногда приходится прокручивать, из-за ограниченной ширины и высоты в пикселях со смартфона)

Я предлагаю, чтобы ваши страницы были разделами, и поместите их в мой тег body. Тогда каждый раздел представляет собой отдельный элемент, и вы можете вызывать их из своего меню (я полагаю, вы хотите прокрутить его вниз в своем меню), поэтому просто укажите им идентификатор, и страница перейдет к нему с помощью jQuery или JavaScript.

Сделайте проверку кода на этой странице, чтобы понять, что я имею в виду: http://www.jellyfishwebdesign.nl/Joost/index.php

Ответ №3:

Укажите height:100% html, тело и контейнер вашей страницы.

Ответ №4:

Я думаю, что этого решения CSS достаточно..

 <body>
  <section id="one">
  </section>
  <section id="two">
  </section>
  <section id="three">
  </section>
</body>

И CSS:

 html,body {
   height:100%;
   margin:0;
   padding:0;
}

#one {
   min-height:100%;
   position:relative;
}

#two {
   min-height:100%;
   position:relative;
}

#three {
   min-height:100%;
   position:relative;
}