CODEWITHSUNDEEP
htmlcss
thesecretmaster
thesecretmaster

Reputation: 1984

Why is the <html> element doesn't fill the window?

I am writing a website and am having an odd problem. 

#Text {
    margin-left:15vw;
    width:70vw;
    background-color:white;
    opacity:0.8;
    vertical-align:center;
}
body {
    margin:0;
}
<!DOCTYPE html>
<html>

<head>
  <title>SomeTitle</title>
  <link rel="stylesheet" type="text/css" href="./main.css">
</head>

<body>
  <img src="someUnimportantImage.jpg" height="100vh">
  <div id="text">
    <p>Text</p>
    <p>More text</p>
    <p>Even more text</p>
  </div>
</body>

</html>

My problem is that when I load my page in google chrome (I haven't tried other browsers),

  1. there is a mysterious white space at the top that I can't get rid of
  2. the <html> element doesn't fill the browers height, and therefore
  3. setting the images height="100vh" makes it fill the <html> element, but not the page.

What I need is for <html> to fill the page and for the white space at the top to disappear.

EDIT

I got the whitespace to disapear by using the code at meyerweb.com/eric/tools/css/reset.

Upvotes: 1

Views: 143

Answers (1)

Stickers
Stickers

Reputation: 78676

When you use viewport units, you don't need to worry about the height/width of the <html> element. However you should move the inline height="100vh" into the CSS instead. And I don't see any "mysterious white space at the top" since you already set body{margin:0;}, it might be caused by your other styles if you still see it.

img {
    height:100vh;
}

And be aware, CSS class/id names are case sensitive, #Text and #text are not the same.

body {
    margin:0;
}
img {
    height:100vh;
}
#text {
    margin-left:15vw;
    width:70vw;
    background-color:white;
    opacity:0.8;
    vertical-align:center;
}
<img src="//dummyimage.com/500">
<div id="text">
    <p>Text</p>
    <p>More text</p>
    <p>Even more text</p>
</div>

Edit: The white space might be from the <p> tag, as it has some default top and bottom margin from the browser.

Upvotes: 2

Related Questions