Question

我有下一个问题，我有一个简单的任务：创建一个包含页眉，页脚和内容的页面。

页眉，页脚 - 固定尺寸
内容 - 高度是动态的。

问题出在我创建的时候

<!DOCTYPE html>
<html>
<head>
    <meta content="width=1100" name="viewport">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <script src="js/jquery-1.11.0.min.js"></script>
    <link type="text/css" rel="stylesheet" href="css/style.css">
    </head>
<body>
</body>
</html>

使用这个CSS：

html
{
height: 100%;
}

body
{
height: 100%;
}

它已经溢出（右侧滚动）为什么？如果我将其设置为获得所有可用空间

Answer 1

您需要删除某些用户代理应用于margin代码的body：

body {
    height: 100%;
    margin: 0;
}

Answer 2

仅适用高度：100％到正文而不是整个HTML：

CSS：

body
{
  height: 100%;
}

创建100％页面

2 个答案: