html - 多个垂直 100% 高度和宽度 div

标签 html css

我正在尝试创建多个宽度和高度均为 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 是什么?我似乎无法让它工作。

最佳答案

解决方案是首先为 marginpadding 重置默认值:

* {
  margin:0;
  padding:0;
}

其次让您的 htmlbody 成为 100%:

html, body {
   height:100%;
}

然后是 div 的尺寸:

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

您不能在第一个字符上为 id 或 class 分配数值

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

关于html - 多个垂直 100% 高度和宽度 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20433129/

相关文章:

android - 用于检测三星设备是否支持悬停的 CSS 媒体查询问题

javascript - 在我的情况下如何设置图像响应

javascript - 仅当 CSS 类存在时才运行 jQuery 函数

css - 在 :hover - possible in CSS? 上交叉渐变 div 背景

CSS float right 向右和向下移动元素(我不想向下)。

html - 如何使在 Web 应用程序上创建的 div 出现在父容器的左上角?

javascript - 键入时变高的输入字段

html - 使用 Flexbox 水平和垂直对齐事物

html - 将 Azure Application Insights 嵌入第三方应用程序

html - 在 css 中为两个不同的闪烁类创建两种不同的样式