'Can't get a div background colour to fill full width of viewport

I'm trying to fill a certain part of the page with a background color. I want the background colour to fill the entire width of the viewport, but have a fixed height. Here's what I've tried:

<div id="theDiv" style="width: 100%; height:200px; background-color:black;">
    Blah blah blah, content goes here.
</div>

But no matter what I try, this always give me a small white margin at either side of the div, between the edge of the div and the boundaries of the viewport. How can I make the div fill the entire width of the viewport?

I don't want to change the bg color of the <body> tag as I only need to fill a certain vertical section of the screen.

The only thing I can think of that I haven't tried yet is to create a 1px wide bg image and set it to x-repeat... is there not a more elegant solution than this?

csshtmlviewport


Solution 1:[1]

Try to set width of body and html to 100% and paddings and margins to 0.

Also you may want to apply CSS reset rules to the beginning of your style sheet. You can use this CSS reset http://meyerweb.com/eric/tools/css/reset/ or google for another one.

Solution 2:[2]

You can use this in your CSS to reset:

* {
  margin-right: 0 !important;
}

However if you are using some framework that uses CSS, it might cause an issue.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 keaukraine
Solution 2 Fritz

Related Questions