Full height DIV

Hi All,

 I've refering and Google-ed a lots of web page and tested lots of time, I still couldn't get my DIV to show 100% height regardless the content. My page only have banner, body and footer. Could someone show me a correct css and html for that matter? I'm using IE7, IE8 and Chrome to test, only IE7 works.

 Thanks in advanced

5/4/2009 6:22:34 PM
asp.net.client-side 24353 articles. 2 followers. Follow

4 Replies

Similar Articles

[PageSpeed] 56
Get it on Google Play
Get it on Apple App Store

I d'ont if this way you did it, i can only test it with IE7 and firerfox



html, body { 
height 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;

#main-container { 
	background-image: url(../images/repeate_left.jpg);
	background-repeat: repeat-y;
	border:1px solid #000; 

In html

<div id="main-container">



If this post is answer of your question then don't forgot to Click Mark As Answer
5/4/2009 7:11:42 PM


 Thanks for the reply. But it do only works with IE7. What is the repeating image purpose?

5/5/2009 12:36:18 AM

Hi stephensaw,

There is no clean CSS which make div height 100% to page. You need to do some CSS hack.

But as far as I understood and experience, people offen find their way to make the div 100% but later find some popluar problem like positioning the footer at the bottom of the page. What I would do is to use table with height 100% with header, body and footer cell. and then after use div inside it.

Though you want to use div structure then refer this...

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<title>One Hundred Percent height divs</title>
<style type="text/css" media="screen">
/* commented backslash hack \*/
html, body{height:100%;}
/* end hack */
html,body {margin:0;padding:0}

#outer{min-height:100%;height:auto;background:#ffffcc;border:1px solid red}
* html #outer{height:100%;border:1px solid red}/* ie6 and under*/

<div id="outer">


Please mark as Answer if it helps u. Thanks!

Parth Patel
Techsture Technologies
Software Developer
5/5/2009 4:45:57 AM

You can use javascript

<script type = "text/javascript">
    function BcgDiv()
        var bcgDiv = document.getElementById("divBackground");
        if (bcgDiv != null)
            if (document.body.clientHeight > document.body.scrollHeight)
                bcgDiv.style.height = document.body.clientHeight  + "px";
                bcgDiv.style.height = document.body.scrollHeight  + "px";
            bcgDiv.style.width = "100%";
        window.onload = BcgDiv;


<div id = "divBackground" style=" position:absolute; top:0px; left:0px;width:0px;height:0px;background-color:#eee; z-index:100;opacity: 0.8;filter:alpha(opacity=60); -moz-opacity: 0.8; overflow:hidden ">

MAKMark as Answer if this reply helps you
ASP.Net Hosting : Host DepotMy Site : ASPSnippets
5/5/2009 5:29:29 AM

Similar Artilces:

DIV side by side with different height !
Hi, My form layout has 4 DIV One on top full width, one on bottom full width. And in the middle I have 2 side by side. How can I make both DIV be the same height?    Their height is dynamic.  Sometimes the left part will be longer or vice-versa. Thank you for helping.    this link will give you several techniques for achieving fluid column height.------------------------------------------------Jeff Turner (simpleModus)Don't forget to mark the correct answer for yourquestion to help out future visitors! Thank you. That website was very useful for s...

Jscript, moving from client-side to server-side (.NET)
Hey all I’m working translating a web-app written in client-side Jscript to run on the server-side as JScript.NET. Without needing to get too specific, I am using Jscript because the original page aggregated raw data to produce statistical results (this was done dynamically based on user 'sort-by' options). The final output is an html report that can be emailed. Because this is currently being done on the client side, as the raw data grows the load-time grows as well (to the point that has almost become unusable). I’m posting here to see if anyone has any experi...

Validation Controls in .NET ( Client side or server side?)
 i have a very basic question. We have all these validation controls in asp.net ( required field, range validator and others)..my question is the required field validator is a server side control. So does that mean that it does a post back?..is it client side or server side control  The only controls that post back are buttons and other inputs where you set AutoPostback="True", such as a dropdownlist or a textbox.  Another way of posting back is using an UpdatePanel and placing a trigger in it for a specified control and/or event. All controls are considered clien...

When to use client side varidation and server side varidation in .net?
In .net or classic web application we can varidate user data either on client isde or server side. How to select which side varidate to be used? Thanks! Generally, I use both client and server validation. I make sure the input is in the correct format and reasonably valid on the client, then I verify the data on the server. The extent of validation also depends on the type of data that I need to validate.Here are a few references:Validating ASP.NET Server ControlsIntroduction to Validating User Input in Web FormsClient-Side Validation for ASP.NET Server ControlsSecurity Checklist...

communication between client side(java script) and server side in .net project
I have a question which is, when building a .net project, we are able to use server side code and client side code(java script). How do they communicate? Thanks Client Side coding works with the WebBrowser. So when ever you write client side code you have to keep browser compatability in your mind and you have to code. Server Side code works with Web Server (IIS) and it's ASPNET ISAPI's. The won't directly communicate with each other. But using AJAX you can all server side code from Client Side! Example article on Ajax@ http://www.devarticles.com/index2.php?option=content&task=...

.NET for client side?
Is this the idea of "Atlas" but using JavaScript rather than another technology? Atlas's goal is to abstract various browser implementations of DOM API and to ease out the developer's job to write rich client applications. Atlas hence makes use of the existing all-browser supported JavaScript to achieve this. Thanks for your reply.Let me convey my idea differently: I would like to author client side code using a class system. I recognise that Atlas is a technology for producing JS code, much in the same way that ASP.NET produces HTML for the browser.Will Atlas be m...

Side-by-Side Divs
Can anyone help me with how to get this setup? I'm trying to have my lit1-3 on the left, the Img in the center, and Lit 4-6 on the right. So it might look like: lit1                   image                   lit4 lit2                                &nb...

Client Side div events
I'm using a DataList control and have the element ItemTemplate setup like this: <ItemTemplate><asp:LinkButton id="SelectButton" Text="Select" CommandName="Select" runat="server" style="display:none"/><div style="width:300px;"><div style="width:150px;"><%# Container.DataItem("CourseName")%></div><div style="width:150px;"><%# Container.DataItem("Location")%></div></div></ItemTemplate> On the DataList's ItemDataBound eve...

List of client side function of extenders and controls for client side
Hello All,I am using AJAX control toolkit for my current project. Now I need to find out what client side functions I can call on an extender. Lets say I am using a PopControlExtender. Now I want to show the popup from a JS funtions.If I can do a guess then it would be something like this$find('ppce').show();From where I can find what client side functions I can call on those extensders. This is really a frusterating thing. I learn about extenders only from Learn tutorials, no help here and there. Can anybody please tell me where are documentations about all the extenders in the tool...

Side by Side Execution of .net v1.1 and .net v2.0
Hi i am new bie to asp.net 2.0.Till date i have been developing projects using VS.Net 1.1 and now i hv decided to upgrade to new version 2.0.Now i want to run and develop my projects using any of the versions as desired.My question is that can i install vs 2.0 without updating the previous version and will i be able to develop and run my applications in any of the versions as desired.i have been known that we can run these versions side by side(i.e. one application can use 1.1 and other 2.0),but can we do side by side development as well(i.e. one application can use 1.1...

Do i need a .Net framework on the client side?
Hello all, Can anyone tell me if there is a .Net framework needed on the client side when want to run an ASP .Net web application? Or will it generate plain html that only requires an Internet browser? Or is it dependent on the version of ASP.Net (1.0, 1.1, 2.0?)   Thanks!   AlbertWeeda     There is no need for the .NET framework to be on the client computer to access your web applications.ASP.NET Websites renders into HTML so all your client needs is a HTML web browser.  you don't need it. and it generates plain html that only requires an Intern...

Side by Side Execution of .net v1.1 and .net v2.0 (continued)
Hi, Dave wrote a previous post that said: "If you are referring to web applications - each Virtual server must specify the framework to run under.  Both can run side-by-side.. but not under the same virtual server (application pool)" That looks fine, but I wonder: Is it just as easy as going to Administrative Tools --> IIS --> Select the virtual directory --> go to the property's ASP.NET tab and then selecting the ASP.NET version? Is there some important information that I need to know before going into this? Are there going to be ANY issues I should be aware of? T...

Client side show/hide div
On the page I have a div: <div id="DivAddress" runat="server">   some content here</div> I want the div to be hidden when the page loads, therefore at the end of the page I run: <script type="text/javascript">$(document).ready(function(){$("#<%= this.DivAddress.ClientID %>").css({"display": "none"});});</script> Below that div there are also buttons which hide or show that div by setting the display to none or block in a similar way (this example uses jquery, but I also used traditional wa...

.Net Framework needed on the client side?
Hi, Do I need to install the .Net Framework to be able to view .aspx files or just need a browser supporting .aspx files? Thanks HI No, u dont need to install the .net framework the browser is enough. Regards. Hi, ASP.NET webforms and controls that you use emit HTML. This is a markup language that a browser understands. So no, a browser is the only thing needed on the client when viewing webapplications built with ASP.NET. Grz, Kris.Read my blog. Handy Firefox plugins for web developers.Workaround for non working Mark as answer buttons....

Web resources about - Full height DIV - asp.net.client-side

Shaker Heights, Ohio - Wikipedia, the free encyclopedia
4,685.0/sq mi (1,808.9/km Shaker Heights is a city in Cuyahoga County , Ohio , United States . As of the 2010 Census , the city population was ...

Emergency services attend serious crash at Main South Rd, Huntfield Heights - AdelaideNow Search Search ...
... smash and turned to see a minibus rolling across Main South Rd after a collision with a Ford sedan that killed three people at Huntfield Heights ...

Uber hits new heights as it takes Perth customers on free CBD chopper rides
Ride sharing platform Uber is taking its Perth presence to new heights on Friday afternoon.

Frankston Heights man kills neighbour’s intruder, dubbed a hero
A MAN who killed his neighbour’s intruder has been dubbed a hero and people have taken to social media to call for a bravery award.

France's far-right girl wonder takes National Front to new heights
When the polls closed after the first round of voting in regional elections, projections indicated Marine Le Pen's National Front party was winning ...

Boy knocked unconscious after falling off 'hoverboard' in Elanora Heights
A teenager was knocked unconscious when he reportedly fell from a 'hoverboard' in Sydney's north on Christmas morning, according to CareFlight ...

4 dead, including 1 gunman, in Rowland Heights shooting
A shooting in Rowland Heights has left four people dead, including a gunman, on New Year&#39;s Eve, the Los Angeles County Sheriff&#39;s Department ...

Jeff Bezos' private spaceflight company is building a monster engine that'll launch the business to new ...
Key to any rocketship is the complex, powerful engines that blast it into space, and right now a private spaceflight company called Blue Origin ...

Officer Fatally Shoots Man Wielding Knife At Dearborn Heights Court House
CBS Local Officer Fatally Shoots Man Wielding Knife At Dearborn Heights Court House CBS Local DEARBORN HEIGHTS (WWJ) – Authorities say a man ...

Sustainability is Reaching New Heights
... Performance Index (EAPI) 2015, which measures the following three things: economic growth [&hellip Sustainability is Reaching New Heights was ...

Resources last updated: 1/16/2016 1:42:46 PM