Geek Answers Handbook

HTML background color doesn't fill the whole page?

Hello everyone here is a picture of the problem:

enter image description here

I want it to fill in the blanks to the left and right of the green frame.

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%;
}
+4
source share
6 answers

These two rules should do this:

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

JsFiddle example

+5
source

which is due to browsers. By default, browsers have margins and margins, and you must set margins and margins to zero in all of your projects.

body{
    margin: 0px;
    padding: 0px;
}
+4
source

div heigt 100 px:)

div boddy wraper, CSS

    * {
    margin: 0;
}

html, body {
    height: 100%;
}

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

.footer, .push {
    height: 20px;
}
+2

. css:

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

.css:

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

0 . , , , -, , body.

body {
    margin: 0px;
    padding: 0px;
    background-color: #58FA58;
}
0
source

More articles:


All Articles