November 4, 2012

100% height of content – px

Question by Vladimir

I have a page with height 100%:

<div id="wrapper">
    <header id="header" class="clearfix">

    </header>
    <div class="main-container clearfix">
        <aside id="sideLeft">

        </aside><!-- #sideLeft -->
        <div id="content">
            <div id="map_canvas"></div>
        </div>
    </div> <!-- #main-container -->
</div><!-- #wrapper -->

CSS:

* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
    min-height: 100%;
}
#wrapper {
    width: 100%;
    height: 100%;
}
#header {
    width: 100%;
height: 45px;
}
.main-container {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

#content {
    height: 100%;
margin-left: 20%;
}

#map_canvas {
    height: 100%;
    width: 100%;
}
#sideLeft {
    height: 100%;
    width: 20%;
    float: left;
}

But I want to make content 100% – height of header (in px), to don’t show scrolling on the page.

I try to add position: absolute; to #header and .main-container but it’s not helping (scroll still showing).

Live example: http://indoor.powerhtml.ru/30/index.html

Answer by Starx

CSS cannot perform calculations and manipulation on page, it is just a stylesheet. You have to use JS for this.

jQuery snippet to do what you want is

$("#header").height($("#header").height()); //This automatically converts % to px

Check it out

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!