Question

I have my css file set up so that this happens for all pages on my site:

body,html{
  height:100%;
}

div#right{
  height:100%
}

I want one page to be an exception. How do I override and use the default height values for that page? Is it enough to declare the html and body with height="auto" in the .html file?

Was it helpful?

Solution

If this code is in external CSS file then write <style> tag in the page you don't want height 100% as - 

<link href="style.css" rel="stylesheet" type="text/css" /> <!-- your current CSS file -->

<style type="text/css">

html, body{
  height: auto;
}

</style>

OTHER TIPS

Just go particular html page's resource code and add style in head part.

<html>
  <head>
       <style>
            body, html 
            {
               height:auto;
               width:auto;
            }
       </style>
  </head>
  <body>
    ..........
  </body>

Yes, "auto" is the default (initial value) for height (at least in most common browsers). Look up the relevant parts in the Mozilla Developer Network or the W3C's CSS 2.1 specification.

In your concrete case you might override one definition with the other. To make sure the one in the file counts, you could add "!important" to the css code in the html file:

body, html{
  height: auto !important;
}

PS: I highly recommend getting familiar with proper web development tools like Opera Dragonfly, Chromium's Developer Tools or Firebug in Mozilla - particularly Chromium's Developer Tools show you which CSS rule counts and which rule is overridden by other rules.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top