开发者

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 workarou开发者_开发技巧nds 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?


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.)


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>.


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);
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜