Create a div that occupies 100% of the screen width?

Asked

Viewed 1,629 times

0

I created a <div> but she’s not occupying 100% of the top I want to see: http://i.imgur.com/Wq6qsho.png she’s at a spacing around :(

this is the code I used:

css:
.top-bar {
    position: relative;
    width: 100%;
    height: 60px;
    background: #313D4C;
}
css div

3 answers

1


Try adding a margin: 0 to that div, and a margin: 0; padding: 0; at the body. Would look like this:

 body{
     margin: 0;
     padding: 0;
 }
 .top-bar {
     position: relative;
     width: 100%;
     height: 60px;
     background: #313D4C;
     margin: 0;
 }

However, the ideal would be an application of these styles to all elements, you would achieve this through the selector * css, it goes like this:

*{
     margin: 0;
     padding: 0;
 }

Besides you could put one border-box: box-sizing, very well explained in that article. It would make the determinations of the elements' sizes, already take into account by themselves margins, spacings, edges, among other things.

  • 1

    Thanks man, solved here. But if I use * will not end up bugging other elements ?

  • This will depend on your code, test and see. Usually not, as it will take into account the paticular Styles to each element. So if you determined margins, these remained there.

0

Are you using some reset? * { margin: 0; padding: 0; }

It may be the lack of some reset, because browsers have a default margin of 8px.

Or try to block:

.topbar { display: block; width: 100%; height: 60px; }

-1

Just make sure she has a father, if so, make sure that this father is picking up 100% of the screen. use 100vh and 100vw measurements

Browser other questions tagged css div

You are not signed in. Login or sign up in order to post.