logo标签列表

HTML背景颜色不填满整个页面？

htmlcss
7

大家好，这是问题的图片：

在此输入图像描述

我希望它可以填充绿色框左侧、右侧和顶部的空白。

HTML：

<!DOCTYPE HTML>
<html>
    <head>
        <LINK href="style.css" rel="stylesheet" type="text/css">
        <link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
        <title>Test page</title>
    </head>
    <body>
    <div id="container" name="header">
        <h1>Blegh</h1>
            <style>
                #container {font-family: 'Montserrat', sans-serif;}
            </style>
     </div>
    </body>
</html>

CSS：
#container{
    background-color: #58FA58;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    height: 100px;
    width: 100%;
}
1
移除元素的默认填充和边距。 - j08691
3
不相关：除非使用 scoped 属性，否则不允许在 <body> 标签中使用 <style> 元素。 - Oriol
@j08691 我该怎么做？ - Alana Stephens
1
将您的<style>元素放在<head>中，并尝试在CSS中添加以下内容：*{ margin:0; padding:0} - Arthur
2
如果您想将整个页面覆盖背景颜色，您需要将样式应用于覆盖整个页面的某些内容，例如body标签。 - StephenCollins
你应该仔细审查你的问题，并决定你是想要“填满页面”还是只是让内容达到边缘。这其中有所不同。 - StephenCollins
6个回答
6
这两条规则应该就可以了：
html, body {
    margin:0;
    padding:0;
}
h1 {
    margin:0;
}

jsFiddle示例

不确定您所说的将绿色框提升到页面顶部是什么意思。在这个示例中，绿色框已经在顶部了。 - j08691
实际问题似乎是关于让颜色“填充页面”。 这并没有解决该问题。 - StephenCollins
@drummin - “我想让它填充绿色框左侧、右侧和顶部的空白处。” - j08691
顶部的问题是“HTML背景颜色没有填满整个页面？” - StephenCollins
@drummin - 那就编辑它，或者要求澄清。当 OP 说他们会接受它时，对我的回答进行投票似乎没有意义。 - j08691
显示剩余2条评论
4

这是因为浏览器的默认设置包含了 margin 和 padding，你应该在所有项目中将 padding 和 margin 设置为零。

body{
    margin: 0px;
    padding: 0px;
}
3

您将 div 的高度设置为 100 像素 :)

要使 div 像 body 包装器一样，您应该使用以下 CSS

    * {
    margin: 0;
}

html, body {
    height: 100%;
}

#container{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -20px;
}

.footer, .push {
    height: 20px;
}
0

您需要移除页面的边距。请在您的CSS中添加以下代码：

body {
    margin: 0px;
    padding: 0px;
}
0
将以下代码添加到你的 style.css 文件中：
html, body {
  margin: 0;
  padding: 0;
}
0
应用0的边距和填充将允许所有元素到达页面边框。但是，如果您想要颜色填满整个页面，这似乎是实际问题，请将背景颜色应用于body标签。
body {
    margin: 0px;
    padding: 0px;
    background-color: #58FA58;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接