我的全屏div似乎不起作用

Question

快一点。我在我的网站上工作，必须打破一些东西，因为第一个div应该全屏：

http://jsfiddle.net/c24RN/1/

<div class="container1">
    <a href="#cont1">
        <img src="img/down.png"></img>
    </a>
    <h1><?php echo $lines[1]; ?></h1>
    <a href="<?php echo $lines[2]; ?>"><h3><?php echo $lines[0]; ?></h3></a>
<button type="button" class="btn" onclick="pauseMusic()">Pause/Play</button>
    <div class="canvasdiv">
        <audio id="music" src="<?php echo $files[$file] ?>" preload="auto"></audio>
    </div>
</div>

是主要的Div代码

为什么它不起作用？

（忽略php）

不是一个笨蛋btw，不同的问题

Answer 1

您已将div绝对定位为导致此问题。删除它，并删除html和body标签的填充和边距（如404错误所示）

Fiddle

.container1 {
height: 100%;
}

/* no position absolute */
html, body{
padding: 0;
margin: 0;
}

Answer 2

您需要从文档中删除默认的边距/填充：

WORKING DEMO

html, body {
    margin: 0;
    padding: 0;
}

Answer 3

html,
body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

.container1 {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}

应该解决问题。