100% div height only fills window not scroll

I have a div which i have 100% height applied to.....as i do with my body/html tags.

The problem is my div only fills 100% of the visible window, it doesnt fill the scoll beneath.

my layout is similar to a 3 coloum layout where my center column is what has the overflow....i want my 1st and 3rd column to match the height of the 2nd.

any help appreciated.

Mar 6 '08 #1

Subscribe Post Reply

15347

drhowarddrfine

7,435

Expert 4TB

divs should only expand to their content. If you wish for them to go to the bottom, you will need to set position:relative or absolute and then, in css, set 'bottom:0'

Mar 6 '08 #2

ukfusion

Hi,

that didnt seem to have any effect...it still only goes to the window height....hopefully this pic will make it more clear.

thats the one reason why i like tables....because each cell is linked with the height of others.

Mar 6 '08 #3

drhowarddrfine

7,435

Expert 4TB

There are other ways to do this but here's one:
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
*{margin:0}
html,body{height:100%}
</style>
</head>
<body>

<div style="height:100%;width:33%;float:left;background-color:red"></div>
<div style="height:100%;width:33%;float:right;backgroun d-color:blue;"></div>
<div style="height:100%;width:33%;margin:0 auto;background-color:grey"></div>

</body>
</html>[/HTML]

Mar 6 '08 #4

ukfusion

sorry i dont know if you understand what i mean......paste this code ito your document and see what i mean......the div with the overflow in fills but the other 2 dont.

i need all 3 divs to have the same height.

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">

*{margin:0}

html,body{height:100%}

</style>

</head>

<body>
 
<div style="height:100%;width:33%;float:left;background-color:red">1111</div>

<div style="height:100%;width:33%;float:right;background-color:blue;">222222</div>

<div style="height:100%;width:33%;margin:0 auto;background-color:grey">

  <p>333333</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

</div>

</body>

</html>

Mar 6 '08 #5

drhowarddrfine

7,435

Expert 4TB

Ah, OK. I'm pretty slammed with work right now so I'm going to refer you to this sample which may explain a lot of things.

Mar 6 '08 #6

by: Not4u | last post by:

Hello, I have a problem with CSS code. I want to have one menu column with a fixed width and a 100% height and the rest of the page for content. ---------------- |.|.|<--100%-->|...

HTML / CSS

Using 100% height and not more

by: Charles | last post by:

I am designing a small HTML editor, and in the lower pane, I want the textarea to use 100% height with the toolbar, but no more than that: http://www.auriance.com/docs/tmp/editor/ Actually it...

HTML / CSS

Two divs and the old 100% height problem

by: joshthomas99 | last post by:

Hello, Yes, I've spent hours reading through all the old postings and searched the net - but couldnt find a solution to the 100% height problem with nested divs. Basically I want the first...

HTML / CSS

Getting I.E 6 to show 100% height divs correctly

by: JimmyHoffa | last post by:

Can anyone help me get I.E 6 to show an absolute positioned div with height as 100% to actually be 100% height of its containing div (which also has height set to 100%)? I.E 7 and Firefox both...

HTML / CSS

100% height and footer at bottom

by: sannymak | last post by:

Hello All, I have some problems making the columns 100% and forcing the footer at the bottom. Please refer to the code below and let me know a solution: HTML CODE: <!DOCTYPE html PUBLIC...

HTML / CSS

TR with 100% height stretching below window in IE

by: guaranine | last post by:

Hi, I've got the 100% height for the whole table working. What is really confusing me is how to make the TR tag in which the content is work properly in IE. If I do not explicitly specify its...

HTML / CSS

Positioning, Overlap, and greater than 100% height/width

by: Christopera | last post by:

Hello, I have built a site that uses two divs, one verticle, and one horizontal as graphic style for the ite. The problem I am having is that if the browser is resized very small the divs are...

HTML / CSS

border on 100% height body creates scroll

by: msoliver | last post by:

I'm trying to figure out why the following creates a vertical scroll bar. Browser is IE 7 - using XHTML 1.0. I expand html and body to height of 100% and then I want to put a border around the...

HTML / CSS

100% height div w/ background!

by: beansetc | last post by:

Since I began doing CSS layouts instead of tables last year, it seems like every single site I do I run into the same problem -- getting a div to stretch to 100% height. I find the solution to it, it...

HTML / CSS

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

100% div height only fills window not scroll

Similar topics