CODEWITHSUNDEEP
htmlcss
Developer
Developer

Reputation: 4321

Creating a 100% page

I have a next problem, I have a simple task: Create a page that will contain header, footer and content.

Header, Footer - fixed size
Content - height is dynamic.

So the problem is when i created

<!DOCTYPE html>
<html>
<head>
    <meta content="width=1100" name="viewport">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <script src="js/jquery-1.11.0.min.js"></script>
    <link type="text/css" rel="stylesheet" href="css/style.css">
    </head>
<body>
</body>
</html>

With this CSS:

html
{
height: 100%;
}

body
{
height: 100%;
}

It already has overflow (scroll on right side) why? If i set it to get all available space

Upvotes: 0

Views: 49

Answers (2)

Dipali Vasani
Dipali Vasani

Reputation: 2536

only apply height:100% to body not whole HTML :

CSS : 

body
{
  height: 100%;
}

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128791

You need to remove the margin which some user-agents apply to the body tag:

body {
    height: 100%;
    margin: 0;
}

Upvotes: 1

Related Questions