Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Set DIV height to 100% – header height

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #148475
    pradeepsixer
    Participant

    How do i set the height of a div (id : main-content) to document height – header height (another div) using css ?

    Here is my code :

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Testing Layout</title>
    <link rel="stylesheet" href="../css/style.css">
    </head>
    <body>
    <div id="header">
    <p id="header-content">
    Testing
    </p>
    </div>
    <div id="main-content">
    Some content this is..
    </div>
    </body>
    </html>
    

    And this is the stylesheet :

    * {  margin: 0px; padding: 0px; }
    
    html { height:100%; }
    
    body { background-color:#d0d0d0; height:100%}
    
    #header { background-color: #000; height:150px; min-width:960px; font-family: 'Open Sans'; }
    
    #header-content { font-size: 30px; color:#fff; text-align: center; padding-top: 50px; }
    
    #main-content { width:960px; border:0px; margin: 0px auto; background-color:#fff;  min-height:100%; padding: 20px; }
    

    As a result of this, my main-content lengthens beyond the document height because of the additional height because of the header. So how do i shorten it to just the document height ?

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.