Hi, I'm playing around with a new project of mine and am struggling a bit with the height attribute of on of my divs. The problem is that, when the contents are big enough to enable scrolling the div will be shorter than the wrapper around it in firefox (you see what i mean if you scroll down to the bottom and keep an eye on the borders) This is an asp.net application, but it should work just fine by changing the panels to divs. Thanks for any help! html { font: 100% Verdana, Arial, Helvetica, sans-serif; height: 100%; background-color: #194E84; } body { height: 100%; margin: 0px; padding: 0px; border-left: 0px; border-right: 0px; overflow: hidden; background-color: #194E84; } #header { top: 0px; width: 100%; height: 150px; background-color: #3B6B9C; position: absolute; } #footer { bottom: 0px; width: 100%; height: 49px; background-color: #3B6B9C; position: absolute; } #content { top: 154px; bottom: 54px; width: 100%; overflow:auto; position: absolute; background-color: White; } #content-inner { min-height: 100%; margin-left: 50px; margin-right: 50px; padding-left: 5px; padding-right: 5px; border-right: solid 1px; border-left: solid 1px; } em.company { font-size: 30px; font-style: italic; text-transform: lowercase; color: #1F242A; padding: 25px; } .meny { position: absolute; top: 43px; width: 100%; border-width: 1px; border-color: #000000; text-align: center; font-size: medium; text-decoration: none; left: 3px; } A:link { text-decoration: none; color: #000000; } A:visited { text-decoration: none; color: #000000; } A:active { text-decoration: none; color: #000000; } A:hover { text-decoration: underline; color: #000000; } .footer { text-align: center; font-size: x-small; font-weight: lighter; font-style: italic; } #progressBackgroundFilter { position: absolute; top: 154px; bottom: 54px; /*top: 0px; bottom: 0px;*/ left: 0px; right: 0px; overflow: hidden; padding: 0; margin: 0; background-color: #000; filter: alpha(opacity=50); opacity: 0.5; z-index: 1000; } #processMessage { position: absolute; top: 30%; left: 43%; padding: 10px; text-align: center; width: 14%; z-index: 1001; background-color: #fff; } .logo { } Code (markup): <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head id="Head1" runat="server"> <title></title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="imagetoolbar" content="false" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript"> function resize() { var winW = 630, winH = 460; if (parseInt(navigator.appVersion) > 3) { if (navigator.appName == "Netscape") { winW = window.innerWidth; winH = window.innerHeight; } if (navigator.appName.indexOf("Microsoft") != -1) { winW = document.body.offsetWidth; winH = document.body.offsetHeight; } } var frame = document.getElementById('content'); var divheight = winH - 208; if (frame) { frame.style.height = divheight + "px"; } } window.onresize = resize; window.onload = resize; </script> </head> <body> <form id="Form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdateProgress runat="server" ID="PageUpdateProgress" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="10"> <ProgressTemplate> <div id="progressBackgroundFilter"> </div> <div id="processMessage"> Laster...<br /> <br /> <img alt="Loading" src="Images/spinner3-black.gif" /></div> </ProgressTemplate> </asp:UpdateProgress> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <div id="header"> <div class="logo"> <img alt="Logo" src="Images/logo_139x145.png" style="height: 145px; width: 139px" /></div> <%--em class="company" style="text-align: center"--%> <p class="meny"> <asp:LinkButton ID="lnkAbout" runat="server" onclick="lnkAbout_Click">Om alfa konsult</asp:LinkButton> ~ <asp:LinkButton ID="lnkServices" runat="server" onclick="lnkServices_Click">Tjenester</asp:LinkButton> ~ <asp:LinkButton ID="lnkContact" runat="server" onclick="lnkContact_Click">Kontakt</asp:LinkButton> </p> <%--/em--%> </div> <div id="content"> <div id="content-inner"> <asp:Panel ID="pnlMain" runat="server" Visible="True"> <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>.</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> </asp:Panel> <asp:Panel ID="pnlAbout" runat="server" Visible="False"> </asp:Panel> <asp:Panel ID="pnlServices" runat="server" Visible="False"> Services...</asp:Panel> <asp:Panel ID="pnlContact" runat="server" Visible="False"> Contact form...</asp:Panel> </div> </div> <div id="footer"> <p class="footer"> Denne siden er laget av og for alfa konsult. Om du ønsker å bruke dette utseendet er det ingen som helst begrensninger på bruken. </p> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="lnkAbout" /> <asp:AsyncPostBackTrigger ControlID="lnkServices" /> <asp:AsyncPostBackTrigger ControlID="lnkContact" /> </Triggers> </asp:UpdatePanel> </form> </body> </html> Code (markup):
Why don't you set your min height (example: min-height: 400px; ) to the minimum needed so that won't happen.