CODEWITHSUNDEEP
htmlcssresponsive-design
Lance Messi
Lance Messi

Reputation: 3

When setting height to 100vh, page appears more than twice the size of the screen vertically

I have this very simple code. The way I understand it, setting the height to 100vh for body should fit everything inside the visible screen, but when I run it, the page appears more than twice the size of the visible screen. I have to set height for body to 40-50vh to fit everything inside the visible screen. I am using latest Chrome on a 1366x768 screen. I know I am missing something very simple here. Thanks in advance for your help.

<!DOCTYPE html>
<html>
<head>
<style>

body {
    height: 100vh;
    max-height: 100vh;
}

textarea { 
    width: 100%; 
    height: 100%;
}

</style>
</head>
<body>

<textarea></textarea>

<textarea></textarea>

<button>POST</button>

</body>
</html>

Upvotes: 0

Views: 1292

Answers (2)

Partho63
Partho63

Reputation: 3117

You are setting your textarea's height to 100% that's why it is taking 100% + 100% + button's height - that's more than twice! Change your textarea's height to auto so that it will take only needed sapce.

body {
  height: 100vh;
  max-height: 100vh;
}
textarea { 
  width: 100%; 
  height: auto;
}
<textarea></textarea>
<textarea></textarea>
<button>POST</button>

Upvotes: 0

Mernlin
Mernlin

Reputation: 512

So what is happening is the body is still the size of the view port but the text area is set to 100% of the view port and as you you have 2 text areas it is overflowing the body container to be 200% of the body. In my snippet I have added a border to the body so you can see what is going on

<!DOCTYPE html>
<html>
<head>
<style>

body {
    height: 100vh;
    max-height: 100vh;
    border:5px solid red;
}

textarea { 
    width: 100%; 
    height: 100%;
}

</style>
</head>
<body>

<textarea></textarea>

<textarea></textarea>

<button>POST</button>

</body>
</html>

So change the text area height to 48% so you can still fit the post button in there aswell.

Upvotes: 1

Related Questions