Как сделать div 100% и что после этого

Question

Как сделать div 100% и что после этого

0

Итак, я исследовал, как сделать div высотой экрана на 100%, но если я поместил еще один div в HTML прямо под первым, появится только последний div. Я хочу сделать сайт, где каждый div ведет себя как слайд.

Здесь код, который я использовал:

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<title>Test portfolio</title>
</head>

<body>
<div id="wrapper" class="overlay"></div>
<div id="wrapper2" class="overlay">allooo</div>
</body>
</html>


    @charset "utf-8";
/* CSS Document */

html, body{
    background:url("backgrounds/[email protected]");
    min-height: 100%; 
    margin:0;
}

#wrapper{
    height:100%;
    background:#fff;
}

#wrapper2{
    height:100%;
    background:#c60;
}

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(51,51,51,0.7);
    z-index: 10;
  }

Tomislav 07 нояб. 2013, в 23:24

Источник

Теги:

html

css

css3

1 ответ

Ещё вопросы

Chris Danek · Accepted Answer · 2013-11-07T19-45-00.000Z

Устанавливая каждый div в position: fixed вы помещаете каждый из них друг над другом относительно окна просмотра. Удалите класс .overlay и вы .overlay их один под другим. Если вы хотите иметь только один на экране за один раз, и никакая полоса прокрутки вам не прибегает к использованию JavaScript.

И вот ссылка на пример с одним, следующим за другим http://jsbin.com/UvOXUXI/1/

Это не работает для меня ... Скопировал это и ничего ... Я использую сервер Wamp.
Хорошо, это работает. Я удалил <! Doctype> из начала моего HTML-файла ..