How to fill the entire width (React.js)?

Question

i'm new to React.js and the first thing i noted is that the entire width of the page is not filled. This is my JS code:

var Navbar = React.createClass({
    render: function(){
        return(
            <div className="navbar"> </div>
        );
    }
});

ReactDOM.render( <Navbar/>,document.getElementById('test') );

And CSS:

.navbar{
    background-color: green;
    width: 100%;
    height: 3em;
}

There is a 3px top, left, right unexpected margin.

Body or the #test element has the padding? What does test look like? — Ruan Mendes, Nov 29 '16 at 17:09
1) Body. 2) Test look like a navbar but with a top, left, right margin of 3px each one. — Devcost, Nov 29 '16 at 23:08

score 6 · Accepted Answer · answered Nov 29 '16 at 17:19

6

Your body either has a margin or padding. You could remove but then it gets messy with other areas of the page you want to have even padding. Another option is you could make the navbar position fixed. which will ignore padding/margin.

.navbar{
  position: fixed;
  top: 0;
  left: 0;
  background-color: green;
  width: 100%;
  height: 3em;
}

http://codepen.io/finalfreq/pen/VKPXoN

answered Nov 29 '16 at 17:19

finalfreq

6,830
2
27
28

Worked, thank you very much! What's wrong with removing the body's margin or padding ? – Devcost Nov 29 '16 at 23:09
There's nothing wrong with it, but if you want your content to be spaced a certain distance from the outside of the page you would have to have a div wrapping all your content that sets the padding vs just doing it on the body that is already there and covers everything – finalfreq Nov 29 '16 at 23:26

score 0 · Answer 2 · answered Sep 10 '21 at 05:52

0

Just do this in index.html page

<body style="margin: 0px;">

answered Sep 10 '21 at 05:52

santosh devnath

144
6

How to fill the entire width (React.js)?

2 Answers2