CODEWITHSUNDEEP
htmlcss
Lieutenant Dan
Lieutenant Dan

Reputation: 8294

Full screen width div area

What's the best approach to creating a div that will take the full width of the screen, no matter what resolution? I'm trying to add a 'top' bar and bottom 'footer' area with divs that have a black background and styled border that I'd create with a small image and repeat. For some reason my attempts are leading to small spaces on the top and sides of the div?

My markup is similar to:

<div id="top">

Top bar stuff

</div>

<div id="pagewrap">

All the page content

</div>

CSS 

#top {

width: 100%;
margin: 0;
padding: 0;
background-color:#000

Upvotes: 12

Views: 137639

Answers (3)

Jeroen
Jeroen

Reputation: 63830

Usually this is the body tag having some paddings and/or margins. Try adding:

body {
  padding: 0;
  margin: 0;
}

If this works, you may want to consider using a normalization stylesheet that fixes this type of issue as well as many other related types of issues.

Extended answer...

The above answers the core issue folks landing here seem to have. But to expand a bit, try to directly answer the original question, and also providing some staple code that I use for things nowaydays:

Here's how I would create a full-width, but also full-height div inside a body in a cross-browser (but modern browser only) way:

document.getElementById("pagewrap").innerHTML = "All the page content<br>".repeat(100);
* {
  box-sizing: border-box; /* not completely needed, yet useful */
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex; /* or css grid for more intricate layouts */
  flex-direction: column;
}

#top {
  background-color: LightCoral;
  height: 150px;
  border-bottom: 3px solid Crimson;
}

#pagewrap {
  background-color: LightGreen;
  flex-grow: 1; /* make it stretch to the bottom even if little content */
  overflow-y: scroll; /* optional */
}
<div id="top">Top bar stuff</div>
<div id="pagewrap">All the page content</div>

Upvotes: 20

user920041
user920041

Reputation:

Ensure that body has padding and margin set to 0 in CSS.

Upvotes: 5

Ariful Islam
Ariful Islam

Reputation: 7675

Just use top:0; and left: 0; and you can also eliminate padding: 0. Don't use top: 0; for other div except top, use left: 0; for other div for eliminate the left space.

#top {
   width: 100%;
   margin: 0;
   padding: 0;
   background-color:#000
   top: 0;
   left: 0;
}

Upvotes: 9

Related Questions