Question

我正在尝试创建100％宽度和宽度的多个div。身高，但仍然悲惨地失败。例如：

<html>
<body>
    <div id="wrapper">
        <div id="1">100% height & width, all you can see when opening this file!</div>
        <div id="2">I'll be 100% when you've scrolled #1 out of the window!</div>
    </div>
</body>
</html>

此解决方案的css是什么？我似乎无法让它发挥作用。

Answer 1

解决方案首先重置margin和padding的默认值：

* {
  margin:0;
  padding:0;
}

第二个让您的html和body成为100％：

html, body {
   height:100%;
}

然后你的div维度：

#wrapper, #one, #two {
   width:100%;
   height:100%;
}

_{您无法在第一个字符串}上为id或class分配数值

演示 http://jsfiddle.net/3fCZg/

Answer 2

根据我对HTML和CSS的理解，如果你创建2个宽度和高度为100％的div并将它们放在同一个包含div中，你只会看到1个div，因为它们都是完全相同的高度和宽度，并放在彼此的顶部。

编辑：对不起我想的是内联元素和z-index（如果我正确地阅读你的帖子，这里是你想要做的事情的代码

<html>
<head>
    <title>Test</title>
    <style>
        #wrapper {
            width: 498px;
            height: 498px;
            border: 2px solid #000000;
        }

        #box1 {
            width: 100%;
            height: 100%;
            background-color: rgba(255, 0, 0, 0.5);
        }
        #box2 {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 255, 0.5);
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="box1"></div>
        <div id="box2"></div>
    </div>
</body>

我希望有效！

编辑：您可以将容器div更改为您想要的任何高度以进一步自定义：D，现在您可以使用您的直觉来创建您希望创建的内容！

多个垂直100％高度＆amp;宽度divs

2 个答案: