Div Height 100%

by rBellantoni 2/23/2009 5:16:00 AM
Several people have asked if there was a method to assign 100% height to <div>'s used as left and/or right navigation menus. In some cases,people also wished to assign background-images to their div's that would always display at 100% of the resized browser window.

Most attempts to accomplish this were made by assigning the property and value: div{height:100%} - this alone will not work. The reason is that without a parent defined height, the div{height:100%;} has nothing to factor 100% percent of, and will default to a value of div{height:auto;} - auto is an "as needed value" which is governed by the actual content, so that the div{height:100%} will a=only extend as far as the content demands.

The solution to the problem is found by assigning a height value to the parent container, in this case, the body element. Writing your body stlye to include height 100% supplies the needed value.

body {
margin:0;
padding:0;
height:100%;
}

Now when height:100%; is applied to divs (or other elements) contained withing the body, the height percentage has a containing (body) value to work with.

The following example is a three column, liquid layout with 100% height assigned to both flanking divs. Background images can be assigned to these divs and will render at 100% of the window height.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>One Hundred Percent height Divs</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%; /* this is the key! */
}
#left {
position:absolute;
left:0;
top:0;
padding:0;
width:200px;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
.content {
margin-left:220px;
margin-right:220px;
margin-bottom:20px;
color:#333;
background:#ffc;
border:1px solid #333;
padding:0 10px;
}
#right {
position:absolute;
right:0;
top:0;
padding:0;
width:200px;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}

#left p {
padding:0 10px;
}
#right p {
padding:0 10px;
}
p.top {
margin-top:20px;
}
</style>
</head>

<body>
<div id="left">
<p class="top">This design uses a defined body height of 100% which allows setting the
contained left and right divs at 100% height.</p>

<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>

<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>
</div>

<div class="content">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>

<div class="content">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>

<div class="content">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>

<div id="right">
<p class="top">To solve an inheritance issue displayed in div #right as rendered in Opera, class p.top
using margin-top:20; is applied to the first paragraph of each outer divs.</p>

<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>

<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
</body>
</html>

Tiling backgrounds may also be deployed:

#right {
position:absolute;
right:0;
top:0;
padding:0;
width:200px;
height:100%; /* works only parent container is assigned a height value */
color:#333;
background:url(images/mytile.gif) repeat;
border:1px solid #333;
}

The above three column layout will not display properly in Netscape 4.x because of the position:absolute; right:0; styles of the div #right. A three column liquid layout was used for demonstration purposes, the 100% height can be applied as required.

Remember to protect Netscape 4 from styles it cannot understand by using the @import rule.

The above has been tested in Opera6, IE6, and Mozilla 1.1 - it should work in most modern browsers.

Have fun!

Tags:

Targeting Internet Explorer and Gecko Based Browsers

by rBellantoni 2/17/2009 5:02:00 AM

To target specific browsers with an inline hack you can do the following:

.box {
   background: #00f; /* all browsers including Mac IE */
   *background: #f00; /* IE 7 and below */
   _background: #f60; /* IE 6 and below */

}

Tags:

Fixing ASP.NET Menu Control in Safari/Chrome

by rBellantoni 2/17/2009 5:00:00 AM

The ASP.NET Menu Control has a known display issue with Safari and Chrome, it renders as links instead of as the proper drop down navigation it has in the rest of the browsers. To remedy this add the following code to your code behind

if (Request.UserAgent.IndexOf("AppleWebKit") > 0)

       {

           Request.Browser.Adapters.Clear();

       }

Tags:

Targeting CSS with Safari and Chrome

by rBellantoni 2/17/2009 4:59:00 AM

Safari and Chrome don't have specific ways to target their browsers so you can use this hack/workaround to target chrome and safari browsers

@media screen and (-webkit-min-device-pixel-ratio:0) {

/* CHROME AND SAFARI ONLY CSS STYLES HERE */ 

}

Tags:

Powered by BlogEngine.NET 1.5.0.7
Theme by Mads Kristensen

About the author

Name of author Author name
Something about me and what I do.

E-mail me Send mail

Calendar

<<  September 2017  >>
MoTuWeThFrSaSu
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678

View posts in large calendar

Recent comments

Tags

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2017

Sign in