CSS - Content div not taking 100%

[kristofdielis]

Hi,

I have a simple masterpage structure, one div for the menu and one for content. The Menu div has a fixed height, the content should take 100%:

    <div id="divMasterMenu">
        <span class="MasterMenuItemSelected"><a href="">Menu 1</a></span>
        <span class="MasterMenuItem"><a href="">Menu 2</a></span>
    </div>
    <div id="divMasterContent">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>

The menu works fine, the divMasterContent however does not take full screen.

The CSS:

body 
{
    background-color: #00FF00;
    font-family: Verdana;
    font-size: medium;
    padding: 1em;
    height: 100%;
}

#divMasterMenu
{
    position: relative;
    width: 100%;
    float: right;
}

/* This does NOT work correctly!! */
#divMasterContent
{
    position: relative;
    top: 40px;
    width: 100%;
    height: 100%;
    background-color: White;
    padding: 5px 5px 10px 5px;
    vertical-align: top;
}


#divMasterMenu .MasterMenuItem
{
    color: #00FF00;
    background-color: White;
    padding: 1em;
    font-weight: bold;
}

#divMasterMenu .MasterMenuItemSelected
{
    color: #000000;
    background-color: #afeeee;
    padding: 1em;
    font-weight: bold;
}

What can I do to have #divMasterContent take 100% of the available screen-space, without causing scrolling (and having the padding I want)?

Thx.

 

[darryncooke]

set the width to auto instead of 100%

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[FrankknarF]

What can I do to have #divMasterContent take 100% of the available screen-space, without causing scrolling (and having the padding I want)?

Give the html 100% height, too. That will, however, cause scrolling, so you will have to adjust the divMastercontent height percentage. And the result of that (scrollbar yes/no) may vary with the screen height (actually: innerHeight or clientHeight) of the visitor. If you would like a layout that fills the available height despite a fixed-height header and is cross-browser, have a look at this tutorial. They are the same techniques as making a sticky footer, as you can see here.

How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Amsterdam Webdesign.

 

[darryncooke]

What you are trying to do is very difficult. You will need to look into CSS and @media queries as well as some javascript (jquery more likely).

100% height does not do what you might think it does and that is keep everything only within the initial browser height.

I have found

http://www.cssstickyfooter.com

to be the best sticky footer framework out there. It's easy and it works very well.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services