Div height 100% please hlep

  • riguy5000

    (@riguy5000)


    11 years, 5 months ago

    Hi guys i am going crazy trying to figure out how to make the .footer and the div .content have height:100% i know how to make the .footer stick to the bottom but then my div . content doesn’t reach the bottom page. i know i can increase the min height on div content but it doesn’t solve the problem.

    here is click

    this is what i am trying to do but have a hard time . make the center page and the footer go to the bottom of the page.

    link here

    please help

    [1]: http://bravocreations.com/wp/
    [2]: http://i.stack.imgur.com/QK3oG.jpg

    CODE

    <body>
    <div class="header">
    </div>  <div class="content">
    <div class="page-content">
    <div class="column_4"></div>
    <div class="column_5"></div>
    <div class="column_6"></div>
    <div class="column_7"></div>
    </div>  </div>
    <div class="footer">
    </div>  	<div style="display:none">
	</div>
    </body>

    body {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    margin:0;
    font-size: 15px;
    font-weight: 400;
    line-height: 157%;
    color: #666666;
    padding:0;
    }
    .content {
    min-height: 0;
    .header {
    min-height:300px;
    background-color:#000000;
    }
    .footer {
    min-height:300px;
    background-color:#000000;
    }
    background-color:#9E959E;
    }

    what i currenty have after you suggested:

    ` html,body {
    height:100%;}
    body {
    font-family: ‘Open Sans’, Arial, Helvetica, sans-serif;
    margin:0;
    font-size: 15px;
    font-weight: 400;
    line-height: 157%;
    color: #666666;
    padding:0;

    }
    .content {
    min-height: 0;
    background-color: #9E959E;
    height: calc(100% – 50px); /* add this */ }

    .footer {
    min-height: 25px;
    margin-left: auto;
    margin-right: auto;
    background-color:#000000;
    clear: both;
    position:fixed;
    right:0px;
    left:0px;
    bottom:0px;
    }

    .header {
    min-height:300px;
    background-color:#000000;
    }
    @media only screen and (min-width : 768px) {
    .header {
    min-height: 25px;
    }
    }
    @media only screen and (min-width : 992px) {
    .header {
    min-height: 25px;
    }
    }

    <body>
    <div class=”header”>
    </div> <div class=”content”>
    <div class=”page-content”>
    <div class=”column_4″></div>
    <div class=”column_5″></div>
    <div class=”column_6″></div>
    <div class=”column_7″></div>
    </div> </div>
    <div class=”footer”>
    </div> <div style=”display:none”>
    </div></body>
    `

The topic ‘Div height 100% please hlep’ is closed to new replies.

Tags