CODEWITHSUNDEEP
htmlcss
Soatl
Soatl

Reputation: 10592

How can I set a fixed height for my entire webpage?

I thought this was a simple fix:

body
{
    height: 1054px;
}

html
{
    height: 1054px;
}

Wouldn't this set the max height of the page to 1054px? I have also tried these workarounds but they didn't work with what I wanted:

html
{
   overflow: hidden;
}

<body><table id = "myTable"><tr><td> ..... </tr></td></body>

#myTable
{
    height: 100%;
}

How do I set an absolute height for a webpage? Also I am more interested in why the body and html height calls wouldn't work. I do a lot of position: relative calls, would that have an effect on it?

Upvotes: 7

Views: 92274

Answers (3)

lpd
lpd

Reputation: 2337

width and height do set absolute widths and heights of an element respectively. max-width, max-height, min-width and min-height are seperate properties.

Example of a page with 1054px square content and a full background:

html {
  min-width: 100%;
  min-height: 100%;
  background-image: url(http://www.example.com/somelargeimage.jpg);
  background-position: top center;
  background-color: #000;
}

body {
  width: 1054px;
  height: 1054px;
  background-color: #FFF;
}

However, since you seem to be table styling (urgh), it would probably be far more sensible to set the height of the table to 1054px and let the body adjust itself automatically to encompass the entire table. (Keep the html style proposed above, of course.)

Upvotes: 12

btx
btx

Reputation: 266

Did you try setting the CSS margin of body to 0? Otherwise there will be some amt (depending on browser) of margin that is included in your page height (and width) but isn't controlled by the height style;

In CSS:

body: { margin: 0; }

IN jQuery:

$('body').css('margin', 0);

Upvotes: 0

Paul D. Waite
Paul D. Waite

Reputation: 98846

Good question. I’m not sure, but have you tried using a single <div> (or <section>) inside <body>, and setting the width, height and overflow: hidden on that? Browsers might give special treatment to <html> and <body>.

Upvotes: 2

Related Questions