У меня есть 2 тестовых блока, у меня полноэкранный режим, он работает, но затем, как только я объявляю, он сжимается и не отображается в полноэкранном режиме.

Я пытаюсь сделать первый div полноэкранным, а затем прокрутить вниз до второго div, который также является размером экрана.

Я установил JSFiddle на странице http://jsfiddle.net/ZfmMv/

HTML-код:

<div id="home">
        <ul>
            <li><a href="#about">About</a></li>
        </ul>

        <h1>Home</h1>
</div>

<div id="about">

        <h1>About</h1>
</div> 

И CSS:

body {
    margin: 0px;
}

#home {
    float: left;
    position: relative;
    width: 100%;
    height: 100%;
    background: aqua;
}

#about {
    float: left;
    position: relative;
    width: 100%;
    height: 100%;
    background: #ff0085;
}

Заранее спасибо за вашу помощь в этом.

0
AppleTattooGuy 8 Июл 2013 в 23:18

1 ответ

Лучший ответ

Добавлять:

html,body {
    height:100%;
}

пример jsFiddle

5
j08691 8 Июл 2013 в 23:21
Следует также добавить margin:0;padding:0
 – 
Arnaud Denoyelle
8 Июл 2013 в 23:23
Объяснение того, что происходит в браузерах с разными типами документов, можно найти в следующих статьях: quirksmode.org/ css / quirksmode.html, cs.tut.fi/~ jkorpela / quirks-mode.html и hsivonen.iki.fi/doctype
 – 
Ilya Streltsyn
8 Июл 2013 в 23:30
Большое спасибо за Вашу помощь :-)
 – 
AppleTattooGuy
8 Июл 2013 в 23:40