CODEWITHSUNDEEP
htmldoctype
Arshia001
Arshia001

Reputation: 1872

<!DOCTYPE> affects <body> size, can't get <body> to fill entire window

I'm designing a webpage which has a footer at the end of the page. Naturally, you'd want the footer to stick to the bottom of the page even if the length of the contents is less than the actual height of the page. After some searching I found out the way to go was to absolutely position the footer at bottom: 0px of the body and make the body fill the entire page. Right? Wrong. No matter what I tried, the body of the page would scale down to fit the elements within it (I tried both CSS and JS, no use) and just when I was about to give up, I found a sample on the internet which did the exact same thing. After yet another two hours of head-banging, I found out that the difference between that page and mine was that mine had a tag at the beginning (put there by Visual Studio).

I did some further researching, but I couldn't find any explanation as to why this happens, or, more importantly, what are the consequences of not including a doctype? Will this lead to problems later on? If so, what can I do about the height of the body element?

EDIT: This is my body's CSS:

body {
background-image: url("images/back.png");
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
}

and this is the HTML (it's ASP, in fact):

<%@ Page Language="C#" %>

<!DOCTYPE HTML> <!-- this line (included by default by Visual Studio) causes the body's height to snap to its contents, as height: auto does -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="header.js"></script>
</head>
<body>
.
.
.
</body>
</html>

I also tried various other doctypes I found on the net, and I still got the same results.

Upvotes: -1

Views: 462

Answers (2)

descene
descene

Reputation: 81

You are probably looking for a solution to stick your website footer to the bottom. This becomes a real problem where you load your content through ajax and during load times your entire web content goes blank.

The solution that I eventually found to be better than any other is to give height a 100% to both your body and html and all your content except your footer in another div and give it some padding. The padding helps clearing room for your footer at the bottom using absolute position, otherwise your content would overlap your footer as well.

Here's an example:

html, body {
    height: 100%;
}
.container {
    padding-bottom: 20px; /* if your footer height is 20px including paddings and margins */
}
.footer {
    position: absolute;
    bottom: 0px;
}

and you can just make your footer's width 100% and text-align center if you want it in the center of your page.

--

As far as Doctypes are concerned, most of us use the standard - its better to keep it that way as it makes it easy for your browser to understand what kind of html it is.

Upvotes: 1

C1pher
C1pher

Reputation: 1972

Here is a simple example of how to position on the screen with css. Check this fiddle.

<div class="bottom"></div>

.bottom {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 20px;
    background-color: black;
}

Upvotes: 1

Related Questions