html - 声明 DOCTYPE 时全屏 div 消失

标签 html css

我有 2 个全屏测试 div,它可以工作,但一旦我声明它缩小并且不显示全屏。

我试图让第一个 div 全屏,然后向下滚动到第二个 div,它也是屏幕大小。

我在 http://jsfiddle.net/ZfmMv/ 设置了一个 JSFiddle

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;
}

在此先感谢您的帮助。

最佳答案

添加:

html,body {
    height:100%;
}

jsFiddle example

关于html - 声明 DOCTYPE 时全屏 div 消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17534296/

相关文章:

HTML/CSS 居中控件到屏幕

javascript - 为什么 Canvas 上下文 drawImage 在 iPhone 上失败

javascript - 如何获取html页面上特定部分的背景颜色

javascript - DIV 内容文本出现在单行/行中

Javascript,切换按钮按类向元素添加样式

javascript - 单击此子项中的链接添加关闭功能

html - 为什么子元素不适合父元素(导致滚动条)?

css - 使用 transform on scroll 将元素位置固定到父级

html - 将标题栏放置在侧边栏旁边

javascript - 具有可隐藏公告/提示的站点