Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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?

like image 964
Soatl Avatar asked May 11 '11 13:05

Soatl


People also ask

How do I create a fixed size web page?

To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.

How do I Auto adjust height in HTML?

If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow.


2 Answers

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

like image 149
lpd Avatar answered Oct 28 '22 14:10

lpd


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

like image 30
Paul D. Waite Avatar answered Oct 28 '22 15:10

Paul D. Waite