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.
5  15360 
divs should only expand to their content. If you wish for them to go to the bottom, you will need to set position:relati ve or absolute and then, in css, set 'bottom:0'
Hi,
that didnt seem to have any effect...it still only goes to the window height....hopef ully this pic will make it more clear.
thats the one reason why i like tables....becau se each cell is linked with the height of others. 
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{heigh t:100%}
</style>
</head>
<body>
<div style="height:1 00%;width:33%;f loat:left;backg round-color:red"></div>
<div style="height:1 00%;width:33%;f loat:right;back ground-color:blue;"></div>
<div style="height:1 00%;width:33%;m argin:0 auto;background-color:grey"></div>
</body>
</html>[/HTML]
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. -
<!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> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
<p> </p>
-
</div>
-
</body>
-
</html>
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.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
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%-->|
|.M.|----------|
|.E.|----------|
|.N.|----------|
|.U.|----------|
|
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 uses 100% + 25px of the toolbar, which means if you click
an icon of the toolbar, it disappears instantly. How could I solve it?
Also resizing the frames doesn't work properly in IE...
Thanks,
|
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 box to be 250px high, and the one below it
to take up the rest of the browser window. I have a big div around the
lot (set to 100% height), and thought that the bottom div would fill
|
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 render the page as intended but I.E.6 causes
issues.
Is this a common problem ?
|
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 "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/templatetest.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta...
| | |
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 height, there is a gap between the header and the content with background images continuing from the header. Here's how it looks: http://graphics.filefest.net/mie350/index.php?page=swimming
However, if I do set the height of the content TR to be...
|
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 then smaller than the website is wide. I have tried fixed positioning but then i get the dreaded overlap when the browser is smaller than the website. Absolute positioning gets rid of the overlap but then brings on the width issue. Is there a way to...
|
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 whole viewport.
What happens is that I get a vertical scrollbar (which I can hide, of
course).
Essentially what I'd like to know why adding a border increases the
block but not the 100% sized viewport (and thus the scrollbar).
|
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 works; then when I try the exact same solution for the next site I do, it refuses to work properly. It's very frustrating how such a simple concept can be so hard to do...
http://www.pinstripepresentations.com/stephanie/residential.php
There...
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
