Forum Moderators: open
Just making my wedding site and i do not want people to be able to scroll via browser scroll bar so i want my div and side banners to fit the exact height of the window.
my Side banner(flash slide out menu) is aligned to the LEFT. My DIV window is right beside it with a height of 340px as of right now.
it fits perfectly on my Laptop Monitor but when i go to my desktop it takes up half the amount of space on the browser window. so everything else is just black space.
I want to be able to have my DIV automatically fit whatever the size of the window is.
i tried setting the height to 100% instead of px but that just allows all the content of the div to fit without scroll.
i am clueless about javascript so i have no code to post.. any help or a point in the right direction would be appreciated.
Thanks
Css
<style type="text/css">
html{ width:100%; height:100%; }
body{ width:100%; height:100%; }
#myDiv{
border:1px solid red;
width:100%;
height:100%;
}
</style>
Html
<div id="myDiv">Hi!</div>
i tried that.. and it does the same thing as just making the width and height 100%
it just makes the div fit all the content.. with no scrolling..
100% width actually makes my div go off the screen so u have to use the browser scroll to go horizontally.
thanks for the tip..i tried that.. and it does the same thing as just making the width and height 100%
it just makes the div fit all the content.. with no scrolling..
It's going to behave differently depending on the doctype you're using.
100% width actually makes my div go off the screen so u have to use the browser scroll to go horizontally.
You can fix that by adding margin:0 and padding:0 to the body class.
thanks for the help Trace.
<!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">
<head>
<script src="swfobject.js" type="text/javascript" ></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style>
<style type="text/css">
html{ width:100%; height:100%; }
body{ width:100%; height:100%; }
#myDiv{
border:0px;
width:100%;
}
p.margin
{
margin: 0cm;
}
</style>
</head>
<body>
<p class="margin">
<div class="margin" id="myDiv" style="overflow:auto">
<p align="left" class="style4">
This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
</p>
</div>
the scroll bar does not work anymore in the div
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title><style type="text/css">
html{ width:100%; height:100%;}
body{
width:100%; height:100%; padding:0; margin:0;
background-color: #000000;
}#myDiv{
border:0;
width:100%;
height:100%;
}p.margin{
margin: 0cm;
}
</style>
</head><body>
<div class="margin" id="myDiv" style="overflow:auto">
<p align="left" class="style4">
This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
</p>
</div></body>
</html>
The reason it was not working for you is because you have your <DIV> inside a <P> so the div was actually 100% the height of your paragraph.
