CODEWITHSUNDEEP
htmlcss
Holger
Holger

Reputation: 2175

HTML full screen side without scrollbars

I tried to create a full screen website without scrollbars and have problems defining the margins for that. Given is a minimum example:

html {
    margin: 0;
    padding: 0;
    height: 100%;
    background: yellow;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    max-height: 100%;
    background: green;
}

h1 {
    background: gray;
}
    <body>
        <h1>Heading 1</h1>
    </body>

Why do I get the yellow background of the html element in the top of the side? Even more surprising to me is that the yellow part disappears, if I add text before the h1 element.

html {
    margin: 0;
    padding: 0;
    height: 100%;
    background: yellow;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    max-height: 100%;
    background: green;
}

h1 {
    background: gray;
}
    <body>
        Add some text and the yellow part disappears.
        <h1>Heading 1</h1>
    </body>

Is there any idea to avoid the yellow part in the top without adding text before the heading element?

Upvotes: 5

Views: 16254

Answers (6)

MattDiMu
MattDiMu

Reputation: 5003

Your body element is a non-floating block-element, just as the contained h1 element. Therefore the size/position of the bodyelement adapts to its child-element h1, which has a margin (margin-top) defined as default.

There are multiple solutions for your problem, one is to make the body-element float. The advantage of this is (compared to removing the margin on the h1) is, that it will work the same way, even if a different element with a margin is inserted.

html {
    margin: 0;
    padding: 0;
    height: 100%;
    background: yellow;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    max-height: 100%;
    background: green;
    float: left;
    width: 100%;
}

h1 {
    background: gray;
}
<body>
        <h1>Heading 1</h1>
    </body>

html {
    margin: 0;
    padding: 0;
    height: 100%;
    background: yellow;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    max-height: 100%;
    background: green;
    float: left; 
    width: 100%;
}

h1 {
    background: gray;
}
<body>
        <h1>Heading 1</h1>
    </body>

Upvotes: 4

as7
as7

Reputation: 1

Try this:

.img-responsive { background-size: 100%; }
OR

.img-responsive { background-size: cover; }

Instead of img tag, use background-image for fullscreen image.

<header>
  <div class="menu_area">...</div>
</header>


html, body, header {
    height: 100%;
}
header {
    background-image: url('images/image1.jpg');
    background-size: cover;
}

Upvotes: 0

Nick_O
Nick_O

Reputation: 472

This is why often something like normalize.css is added to a project to avoid these things with different browsers etc. height: 100vh; would work. To get ride of scroll bars you can also use overflow-y: hidden; or overflow-x: hidden; depending on the situation.

Upvotes: 1

Bogdan P
Bogdan P

Reputation: 1

this is how I would do a full screen website and it is very simple and clean:

<body>

<h1>Main heading</h1>

</body>

The CSS code:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
  background-color: green;
  height: 100vh;
}

h1 {
  color: #fff;
  font-size: 40px;
}

So, if you give to your body a height of 100vh (viewport height) it will stay 100% of the window, no matter the size of it.Like this you won't have a problem with scrollbars.

Upvotes: 0

Winthxr1909
Winthxr1909

Reputation: 1

When starting a new project or as a general rule, always try to reset a lot of the predefined css values that browsers "add". There's some "css reset" stylesheets already created, which you can find with a google search, but for a simple solution you can always start with:

* { margin: 0; padding: 0;}

Then you can always add additional rules that will affect all elements in your document like "font-family: sans-serif" etc. That way you're sure that you have a solid starting point without having too many different looks across browsers.

Later on you can then add the rules more explicitly to the elements that need styling

Upvotes: 0

Joey M-H
Joey M-H

Reputation: 773

Just put margin-top:0; on your h1. Example here

I recommend using a CSS reset to avoid problems like this. Eric Meyer's is very well-known and simple.

Upvotes: 0

Related Questions