CODEWITHSUNDEEP
htmlcssviewport-units
potato
potato

Reputation: 25

Making height and width 100% of the device

I want the body to have margins of like 15px and stay 100% height and width of the window, 100 vh is the same thing.

I want a welcome screen which will fit to the screen (resolution of the user) so basically the body should resize it self to the screen height and width when the user resizes the window.

Ok, so the problem is when I use 100% or vh with margin it overflows, i cannot work with hidden cuz i need the bottom part, now its okay with width because the its display block which fixes the problem for width.

h https://jsfiddle.net/0dx36zb4/

Upvotes: 2

Views: 438

Answers (5)

Parth Raval
Parth Raval

Reputation: 4443

html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
    border: 0;
    overflow: hidden;
}
.splash {
    height: 100%;
    width: 100%;
    z-index: 0;
}
<img src="http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg  
   " class="splash" />

Upvotes: 0

pulekies
pulekies

Reputation: 924

Use padding and box-sizing to fix the issue. I updated your JSFiddle to work:

https://jsfiddle.net/0dx36zb4/4/

  
html,body {
  background-color: red;
  height: 100%;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

body {
  padding:15px;
  margin: 0;
}

section {
  background-color: yellow;
  height: 100%; 
}

h1 {
  margin: 0;
  padding: 0;
}

  
<body>
  <section>
  <h1>hello</h1>
  </section>
</body>

Upvotes: 0

ryansin
ryansin

Reputation: 1817

Don't use margin on the body, instead use a parent/child element and set padding on the parent. Margin is outside of the element, and so is not considered in the calculation - yours overflows because it is 100% of the width/height, plus 15px in each direction. Padding is inside the element and you can set the browser to consider it in your width/height specifications with the box-sizing:border-box property.

HTML

<html>
    <body>
        <div id="parent">
             <div id="child">
             </div>
        </div>
    </body>
</html>

CSS

body {
    width:100vw;
    height:100vh;
}

#parent {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    width:100%;
    height:100%;
    padding:15px;
    margin:0;
}

#child {
    width:100%;
    height:100%;
    margin:0;
}

EDIT

I was also able to get your JSFiddle working so you can see an example of that if you replace your code with the code below.

html,body {
  background-color: red;
  height: 100%;
  margin:0;
  padding:15px;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
section {
  background-color: yellow;
  height: 100%; 
  margin: 0; 
}

Upvotes: 0

user7600596
user7600596

Reputation:

You have to use box-sizing: border-box; along with width: 100vw; and height; 100vh;

Upvotes: 1

Bart van den Burg
Bart van den Burg

Reputation: 2364

Try

body {
  width: 100vw;
  height: 100vh;
}

Upvotes: 1

Related Questions