CODEWITHSUNDEEP
asp.nethtmlcss
user1438082
user1438082

Reputation: 2748

Full height Web Application

i would like to make my website utilize the full height of the browser. I have tried all the usual css to no avail. id like the Sidebar and main content to fill the full height of the browser while the header should stay the fixed height.

jsFiddle

Any help appreciated thanks Damo

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="assets/js/jquery.js" type="text/javascript"></script>
    <title>TestSite</title>
    <link href="assets/css/Main.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" LoadScriptsBeforeUI="True">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel" runat="server">
        <ContentTemplate>
            <div id="HeaderWrapper">
                <div id="Header">
                </div>
            </div>
            <div id="ContentWrapper">

                <div id="Sidebar">

                </div>
                <div id="Content" style="border: thin solid #666666"  class="Tabs">
                </div>
                <!-- end of content -->        
            </div>
            <!-- end of wrapper -->
            <div>
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>​

CSS

#HeaderWrapper 
{
    width: 100%;
    clear: both;
    height: 80px;
    margin-top:2px;
    margin-bottom:2px;
    margin-right:0px;
    margin-left:0px;    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#99CCFF'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9CF)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #FFF,  #9CF); /* for firefox 3.6+ */   

    padding-top:0px;
    padding-bottom:0px;
    padding-right:0px;
    padding-left:0px;
    border-bottom:thin solid #FFFFFF;

}

#Header
{    

    width:1024px;
    margin: 0 auto;
    padding-top:0px;
    padding-bottom:0px;
    padding-right:0px;
    padding-left:0px; 
    border-radius: 5px;    



}

#ContentWrapper 
{
    width:1024px;
    margin: 0 auto;
    padding-top:0px;
    padding-bottom:0px;
    padding-right:0px;
    padding-left:0px; 
    border-radius: 5px;    


}


/* sidebar */

#Sidebar {

    float: left;
    width: 184px;
    padding: 0px;
    height:800px;
    border: thin solid #666666;
    padding:0px;
    border-radius: 0px;
    margin-top:0px;
    margin-bottom:0px;
    margin-right:6px;
    margin-left:0px;    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #FFF,  #FFF); /* for firefox 3.6+ */ 


}


/* end of sidebar -->

/* content */

#Content {
    float: left;
    width: 824px;
    padding-top:0px;
    padding-bottom:0px;
    padding-right:0px;
    padding-left:0px; 
    min-height:800px;
    border-radius: 0px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #FFF,  #FFF); /* for firefox 3.6+ */ 
}
/* End content */



/* End content */
html,body {
    margin:0px;
    padding:0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:13px;
    line-height:1.5em;     
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003366', endColorstr='#FFFFFF'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#036), to(#FFF)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #036,  #FFF); /* for firefox 3.6+ */ 
    height: 100%;    

}​

Upvotes: 1

Views: 2703

Answers (5)

user1438082
user1438082

Reputation: 2748

ive decided not to reinvent the wheel and use this. For anyone reading this please follow this advice or you will go mad!! Description of Solution

which leads me to this

Solution

Upvotes: 0

WebDeveloper
WebDeveloper

Reputation: 21

You have to use media queries, like this:

@media (min-width: 768px) {
    body{
        height:100%;
    }
}

Upvotes: -1

pinoy_ISF
pinoy_ISF

Reputation: 1182

I know somebody already provided a solution with javascript but just in case you want pure CSS then, try setting the height of your #ContentWrapper, UpdatePanel, and form to 100%.

Put this in the head section 

<style type="text/css">
    #<%=UpdatePanel.ClientID%> 
    {
        height: 100%;    
    }
</style>

Update your CSS file:

#ContentWrapper 
{
    height: 100%;
    width:1024px;
    margin: 0 auto;
    padding-top:0px;
    padding-bottom:0px;
    padding-right:0px;
    padding-left:0px; 
    border-radius: 5px;    
}

html,body, form {
    margin:0px;
    padding:0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:13px;
    line-height:1.5em;     
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003366', endColorstr='#FFFFFF'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#036), to(#FFF)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #036,  #FFF); /* for firefox 3.6+ */ 
    height: 100%;    

}​

Upvotes: 4

Kev
Kev

Reputation: 2726

If I understand you, this is what you want:

http://jsfiddle.net/KZurX/11/

I have decreased the 768 number to account for the small size of the test window in jsFiddle. You can see that the side bar and main content fill the window when the window height becomes larger than the specified value. Note: jsFiddle does not run server side code, so your asp.net controls are unnecessary.

Upvotes: 0

Jason Sperske
Jason Sperske

Reputation: 30436

Well you could always set the height of the elements you want via JavaScript (here is an updated demo)

var height = $(window).height()-$("#HeaderWrapper").height()-10;
$("#Sidebar,#Content").css("height", height);

You would want to add this code on the resize event like this $(window).resize(function() {}); (jsFiddle seems to get in the way of modifying this event)

Also I removed the min-height and made the content pane use overflow-y: scroll while working on this because I thought it would work better and support a wider range of browsers, but this is not needed for this approach.

Upvotes: 1

Related Questions