Одностраничный адаптивный сайт?

0

Я пытаюсь создать веб-сайт только с одной страницей, которая является отзывчивой. Идея состоит в том, чтобы прокручивать вниз с помощью якорей.

Тем не менее, я понятия не имею, как я могу заставить все divs заполнить весь экран по своему усмотрению.

body {
    width: 100%;
    height: auto;
    font-family: Source Sans Pro, Century Gothic;
    background: url('images/bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
}

ul {
list-style: none;
}

#intro1 { 
font-family:'Press Start 2P', cursive; 
font-size: 80px; 
display: block; 
text-align: center; 
margin-bottom: auto; 
margin-top: auto; 
top: 50%;  
height: 100%;
width: 100%;
position: absolute; 
}

#intro2 { //This doesn't work. I've also tried to set top with pixels.
top:100%;
height:600px;
width: 100%;
position: absolute;
font-size: 80px; 
display: block; 
text-align: center; 
margin-bottom: auto; 
margin-top: auto; 
top: 50%;  
font-family: Source Sans Pro;
height: 100%;
width: 100%;
}

#products { //This works fine for some reason.
top: 800px;
width: 100%;
position: relative;
background: url('images/circuit.jpg');
font-family: Source Sans Pro;
font-size: 16px;
margin: 0;
text-align: center;
}

Как я могу иметь каждый div для заполнения всего экрана? Я не хочу использовать какие-либо плагины jQuery, я просматривал почти все бесплатные.

  • 0
    Поместите здесь соответствующую HTML-структуру и попробуйте создать тестовый пример в jsFiddle.
  • 0
    en.wikipedia.org/wiki/Single-page_application
Теги:

3 ответа

0
Лучший ответ

Вы можете использовать VH-блок css. это фактически единица общей высоты окна просмотра. Итак, 100vh = 100% height of the viewport.

Вот пример:

HTML:

<div id="content1" class="content">
    <a href="#content1">content1</a> | 
    <a href="#content2">content2</a> | 
    <a href="#content3">content3</a> 
</div>
<div id="content2" class="content">
    <a href="#content1">content1</a> | 
    <a href="#content2">content2</a> | 
    <a href="#content3">content3</a> 
</div>
<div id="content3" class="content">
    <a href="#content1">content1</a> | 
    <a href="#content2">content2</a> | 
    <a href="#content3">content3</a> 
</div>

CSS:

.content{height:100vh}
#content1{background:#EEE}
#content2{background:#CCC}
#content3{background:#AAA}

JSfiddle: http://jsfiddle.net/Vj3dZ/

Ссылка: http://snook.ca/archives/html_and_css/vm-vh-units

Примечание. Перед использованием необходимо проверить совместимость браузера: http://caniuse.com/viewport-units

Поделиться
  • 0
    Работает, но я ищу кросс-браузерное решение.
  • 0
    тогда вы должны сделать html, body {height: 100%} и ваш .targetDiv {height: 100%}
Показать ещё 3 комментария
0

Я думаю, вы должны установить 

HTML { height: 100%;}

Сначала проверьте этот вопрос

Поделиться
0

Они работают, если вы установили тело на 100% и другие основные divs тоже!

height: 100; body height: 100; вместо auto

Затем для #intro1 и #intro1: #intro1 все типы позиционирования, такие как margin, top и т.д., И тогда это сработает.

базовая демонстрация (измените размер браузера, а затем запустите его, чтобы увидеть, что div занимает всю область с видом-портом)

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню