|
CSS - Div Set At Minheight Of 100% Is Only As Tall As The Viewport
Greetings,
I'm trying to implement a pseudo-modal dialog by layering the following: A div containing an iframe to be loaded with a form page A semi-transparent div to cover the entire underlying page, to prevent clicks on other elements The problem is that the cover div is only as tall as the viewport, which means that any page content in the scroll area below the viewport is left exposed. Below is the source. Any suggestions would be most appreciated! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type"
content="text/html;charset=iso-8859-1">
<title>Test</title>
<style type="TEXT/CSS">
html,body {
margin:0;
padding:0;
height:100%;
}
#contactDiv{
z-index:2;
display:none;
position:absolute;
top:100px;
left: 50%;
margin-left:-300px;
border-style:solid;
height:450px;
width:600px;
background-color:#ffffff;
border-color:#666666;
border-width:10px;
}
#modalOverlay{
z-index:1;
display:none;
position:absolute;
top:0px;
left: 50%;
width:1008px;
margin-left:-505px;
min-height:100%;
background-color:#000000;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
</style>
</head>
<body>
<a onclick=
"javascript:document.getElementById('modalOverlay').style.display='block';
document.getElementById('contactDiv').style.display='block';">
SHOW IT</a>
<p>
<div id=contactDiv>
<iframe id=contactIframe width=600 height=450 scrolling="no"
frameborder=0></iframe>
</div>
<div id=modalOverlay>
</div>
testing testing testing testing testing testing testing testing
(The word "testing" was actually repeated multiple times --
enough to force scrolling on my laptop. I edited it for (relative)
brevity.)
</body>
</html>
This is a simplified version of the actual page. There's a menubar with a link that populates the div with the actual contact form. I cut out everything that didn't relate to the problem. Thanks, DM Similar TutorialsI'm just trying to run an 8-pixel high blue bar across the top of my pages. Looks fine in Safari and Firefox. But appears to be 20+ pixels high in IE. Any ideas? Here's my CSS file. See #header. Thank you for your help! Code: * { font-style: normal; font-weight: normal; text-decoration: none; text-align: left; text-indent: 0; margin: 0; padding: 0 }
body { color: #333; font-size: 1em; font-family: "Myriad Pro", "Myriad Web", "Lucida Grande", "Trebuchet MS", Tahoma, Helvetica, Arial, sans-serif; line-height: 1.5; background: #fff url("../images/back_scrabble_tiles.jpg") no-repeat left 9px; padding-right: 0; padding-bottom: 30px; padding-left: 0 }
a { text-decoration: underline }
a:link { color: #369 }
h1 { font-size: 2.4em; letter-spacing: -0.05em; margin-top: 10px; margin-bottom: 20px }
h2 { font-size: 1.8em; margin-top: 20px; margin-bottom: 20px }
h3 { font-size: 1.2em; margin-top: 20px; margin-bottom: 20px }
#header { background-color: #276da3; height: 8px; border-bottom: 1px solid #fff }
#content { margin-top: 44px; position: relative; overflow: hidden }
#maincontent { margin-right: 48px; margin-left: 450px }
#maincontent h1 { font-size: 2.4em }
#maincontent h3 { color: #276da3 }
#maincontent b { font-weight: bold }
#maincontent i { font-style: italic }
#maincontent ul { padding: 20px }
#maincontent #photo { float: right }
#contactform { line-height: 1.2 }
#sidebar { width: 404px; float: left }
#sidebar #logo { padding-top: 240px; padding-bottom: 32px; padding-left: 32px }
#sidebar #navigation { margin: 10px 0; padding: 0; width: 400px }
#sidebar #navigation ul { list-style: none }
#sidebar #navigation li a { color: #949576; font-size: 1.2em; font-weight: bold; text-decoration: none; background: #fff; text-align: right; display: block; padding: 8px 10px; height: 20px; border-bottom: 1px solid #e5e7cd }
#sidebar #navigation li a:hover { color: #797a58; background-color: #ebecdd }
#footer { margin: 24px 8% 12px 36%; padding: 12px 0; clear: both }
#footer * { font-size: 0.9em; text-align: center }
Hello, I have a container div with an id of "outer". This container holds 3 column divs, leftcolumn, rightcolumn and centercolumn. The container CSS looks like this: Code: #outer{
padding:0px;
margin-left:auto;
margin-right:auto;
width:755px;
background-color:#FFFFFF;
height:100%;
z-index:1;
background-image: url(images/common/whitebox.gif);
background-repeat:repeat-y;
}
But for some reason, the container doesn't extend down to the length of the inner divs. Each column will vary in the future because everything is pulled from a database. Yet you can see the issue he http://www.caillouette.com/FriendsPHP2/index.php Any help, tips or tricks are appreciated. Thanks I have some tables that contain a lot of columns, so the table goes beyond the users viewport. I would like the body of the page to expand to the table, anyone know of a way to get the body to expand horizontally. Below is some code, I would like the red outline to expand to the black. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body style="border:1px solid red;"> <table style="border:1px solid green;width:2500px;"> <tr> <td style="">slkfdj</td> </tr> </table> </body> </html> I've been searching for a few days, but I haven't found a solution to my problem. How do I get my parent DIV to expand to contain all of my content beyond the viewport? CSS: Code:
html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
min-height: 100%;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
min-height: 100%;
}
.page {
background-color: #dddddd;
margin-left: -390px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-top-color: #9CB0C0;
border-right-color: #9CB0C0;
border-bottom-color: #9CB0C0;
border-left-color: #9CB0C0;
position: absolute;
height: 100%;
min-height: 100%;
width: 780px;
left: 50%;
top: 0;
}
.header {
position: absolute;
height: 158px;
width: 764px;
background-color: #FFFFFF;
left: 7px;
top: 0px;
}
.content {
position: absolute;
left: 7px;
top: 159px;
background-color: #9CB0C0;
height: 821px;
width: 764px;
margin-bottom: 34px;
}
.footer {
background-color: #415569;
height: 34px;
width: 764px;
left: 7px;
bottom: 0px;
}
And the HTML: Code: <?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/test.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="lPage" style="position:absolute; z-index:1" class="page">
<div id="lContent" style="position:absolute; z-index:2;" class="content"></div>
<div id="lHeader" style="position:absolute; z-index:1" class="header"></div>
<div id="lfooter" style="position:absolute; z-index:3" class="footer"></div>
</div>
</body>
</html>
I've searched through a few of the threads here, but haven't been able to find an answer either. Thanks, Brent is it possible? its the banner... the content spans around 1000 pixels wide so with 100% width i miss a piece when i scroll to right of page just making the body around 1000 pixels seems to get a horizontal scrollbar when its not needed for the content....either that or its just missing some pixels... cant a div be 100% of the page? I've got a problematic background DIV. It fills up the entire viewport and looks correct, but cuts off at the bottom (one screen height down) when I scroll. How can I get this DIV to span the entire height of the document, instead of just the height of the viewport? BTW, it works fine in IE 6, but cuts off in FireFox 0.9, Opera 7.5, and Netscape 7.1 Here's the code (you'll have to populate the content DIV to get scrollbars and witness the problem): Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
height: 100%;
background-color: #F1EFE2;
}
html {
margin: 0;
padding: 0;
height: 100%;
}
.bg {
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
width: 960px;
height: 100%;
background: #F7F6EF;
text-align: center;
border-right-color: #9E987F;
border-right-width: 1px;
border-right-style: solid;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #9E987F;
}
.heading {
position: relative;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
width: 100%;
background: #7C2812;
color: #F7F6EF;
vertical-align: middle;
text-align:left;
padding-top: 10px;
padding-bottom: 10px;
text-indent: 10px;
}
.content {
position: relative;
top: 20px;
padding-left: 15px;
padding-right: 15px;
width: 920px;
vertical-align: top;
text-align:left;
}
-->
</style>
</head>
<body onResize="window.location.href = window.location.href;">
<div class="bg">
<div class="heading">
heading goes here
</div>
<div class="content">
content goes here
</div>
</div>
</body>
</html>
Any help would be greatly appreciated! I have created a CSS site that has a footer spanning the bottom of the viewport and whilst I have managed to glue it to the bottom I have another div that is behind it even though I think I have set-up the container properly. The troublesome page is http://www.cimbian.co.uk/BognorArchers/recurve.htm and you will see that the bottom of the text in the main pane is obscured by the footer. Basically I have a meta-wrapper for the whole page: and then have the main content within it. Following on from the content I have the footer and then I close the meta-wrapper. Something like this: <div id="meta_wrapper"> <div id="BA_main_content_area" class="clearfix"> <div id="BA_Main_Full_Width"> </div> <div id="footer"> </div> </div> My CSS for this is: div#meta_wrapper { width: 760px; margin-left: auto; margin-right: auto; background-color: yellowgreen; text-align: left; position: relative; min-height: 100%; height: 100%; voice-family: "\"}\""; voice-family: inherit; } html>body #meta_wrapper { height: auto; } div#BA_main_content_area {width:760px; align: center; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; font-size: 0.85em } div#BA_Main_Full_Width { border:3px inset yellow; font-family: Verdana; font-size: 0.85em; text-align: justify; position: relative; width: 500px; margin: 10px 30px 0px 10px; padding: 3px; background-color: #FFFFCC; float: left; } div#footer { position: absolute; bottom: 0; width:760px; padding:4px 0; font-size: 0.6em; text-align: center; background-color: white; /* Blue */ border-top:1px solid yellow; border-bottom:2px solid yellow; margin-top:1.5em;} /* orange border */ The problem occurs in IE and in Netscape so although I have box-model problems due to IE in Firefox the problem is not limited to IE. As far as I can tell from much web-reading and a couple of books this should do it. Any thoughts? PS: I also posted this in the MS FP forum as I built the page in FP but have not yet found a solution so please don't yell if you have seen the post there too ;-) |
|||||||