CODEWITHSUNDEEP
htmlcss
koela1
koela1

Reputation: 225

Set minimum height to be the higher between x and screen height

I have a page with a repeated background image that I want to expand behind the entire page content.

So I want the HTML's height to be set to either 600px or 100% of screen—the highest between them

(600px being the minimum height I need for my content, and 100% in case that the screen height is bigger than 600px so I want to expand my HTML to fit it)

I tried

html
{
    min-height:600px;
    height:100%
}

which doesn't work.

The repeated background-image is in a nested div (#container) since my site's width is limited and centered

#container
{
    width:1000px;  
height: 100%;
margin:0 auto;
background-image: url("/images/bg_content.png");
}

<body>
  <div id="container">
  </div>
</body>

Upvotes: 0

Views: 138

Answers (1)

PassKit
PassKit

Reputation: 12581

Apply to the body, not the HTML

body { 
  min-height:600px; 
  height:100%;
}

This fiddle will always have a minmum of 600px but will expand when required.

Upvotes: 1

Related Questions