0

所以，我研究了如何使 div 的屏幕高度为 100%，但是如果我在第一个 div 的正下方放置另一个 div，则只会出现最后一个 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/escheresque_@2X.png");
    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;
  }
4

1 回答 1

0

通过将每个设置div为position: fixed您将它们中的每一个相对于视口放在彼此的顶部。删除.overlay该类，您将在另一个下方显示它们。如果您想一次只在屏幕上显示一个并且没有滚动条，您将不得不求助于使用 JavaScript。

这是一个示例的链接，其中一个跟随另一个http://jsbin.com/UvOXUXI/1/

于 2013-11-07T21:59:25.673 回答