Making background DIV height match height of content at runtime

Page 1 of 1

4 Replies - 728 Views - Last Post: 23 August 2012 - 03:59 PM

#1 Memsey  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 11-July 12

Making background DIV height match height of content at runtime

Posted 15 August 2012 - 03:57 PM

Ok so here is the problem.

If you use the code I have placed below, you will see a black background, a grey background on top of this, and a finally white background on top of the other 2 layers which includes a load of text in a content placeholder within it.

All of these backgrounds are divs which use css to position themselves on the page (see site.master and stylesheet.css).

On top of the central white div is a load of text “blah, blah, blah...” which continues off the bottom of the window (see default.aspx and default.aspx.vb).

Currently the divs in the background (black, grey and white) don’t stretch to the bottom of the “blah, blah, blah” text.

This is not what I want.

I want the background divs to match the height of the central content!!!

Is there a way to do this doing css or will I have to use javascript to set the heights of my background divs at runtime?

I’ve looked on the web for a solution to this problem and am struggling to find a working solution.

Any help would be appreciated.

Regards,

Nick.

Here is the code:

site.master

<%@ Master Language="VB" AutoEventWireup="false" CodeFile="Site.Master.vb" Inherits="Site" %>

<!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 runat="server">
    <title></title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <div id="DivDarkBGround" class="masterDarkBGround">
    <div id="DivLightCenter" class="masterLightCenter">

    <div id="DivHeader" class="masterHeader">
    </div>

    <div id="DivWhite" class="masterWhite">
    <div id="DivMainContent" class="masterMainContent">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>

    </div>
    </div>
    </form>
</body>
</html>


default.aspx

<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false"
    CodeFile="Default.aspx.vb" Inherits="_Default" %>

<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="head">
</asp:Content>
<asp:Content ID="Content2" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
    <asp:Label ID="Label1" runat="server" Text="" style="position:absolute; top:25px; left:25px; width: 870px;"></asp:Label>
</asp:Content>


default.aspx.vb


Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        Label1.Text = "blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah"
    End Sub
End Class


and finally, stylesheet.css

body 
{
    height:100%;
}

.masterDarkBGround
{
        position:absolute;
        background-color: #000000;
        top:0px;
        left:0px;
        height: 100%;
       min-height: 910px;
        width: 100%;
        z-index: 1;  
}


.masterLightCenter
{
        top:0px;
        margin-left: auto;
        margin-right:auto;
        height: 100%;
        min-height: 910px;
        width:1400px;
        background-color: #333333;
        z-index: 2; 
}

.masterWhite
{
        top:0px;
        margin-left: auto;
        margin-right:auto;
        height: 100%;
        min-height: 800px;
        width:920px;
        z-index: 3;
        background-color: #FFFFFF;
  
}

.masterMainContent
    {
        position: absolute;
        margin-top: 110px;
        min-height: 800px;
        width:920px; 
        /* overflow-y: auto;
         overflow-x: auto;  */
        z-index: 4;


    }
    
    .masterHeader
{
        position: absolute;
        top: 0px;   
        margin-left:0px;
        margin-right:0px;
        height:110px;
        width:1400px;
        z-index: 4;
        background-color: #333333;
}


Is This A Good Question/Topic? 0
  • +

Replies To: Making background DIV height match height of content at runtime

#2 ToshNeox  Icon User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 100
  • Joined: 10-December 11

Re: Making background DIV height match height of content at runtime

Posted 21 August 2012 - 04:23 PM

Considering there's 0 replies, I'm going to try and see how I can help.

You need to post a link to a live version of the site for me to be able to understand what's happening.

Usually, the parent div will automatically shrink to the size of it's contents, unless any CSS such as width, height or padding, which would affect it's size, in which case it would be changed.

Seeing that you've set tne position of the parent div to absolute, and also it's child div, it will shrink to a random size. To fix this you could try creating an empty div with a position set to static (or try relative), or even add in a breakline, after the content divs (end of the parent div).

Quote from the W3C website on absolute positioning:
"An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:"
(http://www.w3schools.com/Css/css_positioning.asp)
Was This Post Helpful? 0
  • +
  • -

#3 Memsey  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 11-July 12

Re: Making background DIV height match height of content at runtime

Posted 23 August 2012 - 11:17 AM

Thanks for the reply. I have solved this problem since my original post using a mixture of fixed and absolute positioned divs. If anyone is reading this and wants a copy of the css I used then post a reply and I'll copy and paste it in this thread if I still have the code at the time of the request.
Was This Post Helpful? 0
  • +
  • -

#4 ToshNeox  Icon User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 100
  • Joined: 10-December 11

Re: Making background DIV height match height of content at runtime

Posted 23 August 2012 - 12:02 PM

View PostMemsey, on 23 August 2012 - 11:17 AM, said:

Thanks for the reply. I have solved this problem since my original post using a mixture of fixed and absolute positioned divs. If anyone is reading this and wants a copy of the css I used then post a reply and I'll copy and paste it in this thread if I still have the code at the time of the request.


You should post your fix no matter what, so people who come across this in the future can see what you fixed :balloon:
Was This Post Helpful? 0
  • +
  • -

#5 Memsey  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 11-July 12

Re: Making background DIV height match height of content at runtime

Posted 23 August 2012 - 03:59 PM

too true Tosh.

here is the code for all to see and use:

stylesheet.css

body 
{
    height:100%;
}

.masterDarkBGround
{
        position:fixed;
        background-color: #000000;
        top:0px;
        left:0px;
        height: 100%;
       min-height: 910px;
        width: 100%;
        z-index: 1;  
}


.masterLightBGround
{
        top:0px;
        background-color: #333333;
        margin-left: auto;
        margin-right:auto;
        height: 100%;
        min-height: 910px;
        width:1400px;
        z-index: 2; 
}

.masterWhiteBGround
{
        top:0px;
        background-color: #ffffff;
        margin-left: auto;
        margin-right:auto;
        height: 100%;
        min-height: 910px;
        width:920px;
        z-index: 3; 
  
}

.masterHoldContent1
{
        position:absolute;
        background-color: transparent;
        top:0px;
        left:0px;
        height: 100%;
       min-height: 910px;
        width: 100%;
        z-index: 1;  
}

.masterHoldContent2
{
        top:0px;
        margin-left: auto;
        margin-right:auto;
        height: 100%;
        min-height: 910px;
        width:1400px;
        background-color: transparent;
        z-index: 2; 
}

.masterCenterContent
{
        top:0px;
        margin-left: auto;
        margin-right:auto;
        height: 100%;
        min-height: 800px;
        width:920px;
        z-index: 3;
        background-color: transparent;
  
}
 
.masterMainContent
    {
        position: absolute;
        background-color: transparent;
        top: 110px;
        min-height: 800px;
        width:920px; 
        z-index: 4;
    }

.masterHeaderHolder
{
        position:fixed;
        background-color: transparent;
        top:0px;
        left:0px;
        height: 140px;
        width: 100%;
        z-index: 2; 
}

 .masterHeader
{
       top:0px;
        background-color: #333333;
        margin-left: auto;
        margin-right:auto;
        height: 110px;
        width:1400px;
        z-index: 2; 
}


site.master

<%@ Master Language="VB" AutoEventWireup="false" CodeFile="Site.Master.vb" Inherits="Site" %>

<!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 runat="server">
    <title></title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">

<!-- background divs -->

<div id="DivDarkBGround" class="masterDarkBGround"> 
<div id="DivLightBGround" class="masterLightBGround"> 
<div id="DivWhiteBGround" class="masterWhiteBGround">
</div>
</div>
</div>

<!-- header divs -->

<div id="DivHeaderHolder" class="masterHeaderHolder">
<div id="DivHeader" class="masterHeader">
</div>
</div>

<!-- position divs -->

<div id="DivClearBGround" class="masterHoldContent1">
<div id="DivClearBGround2" class="masterHoldContent2">

<div id="DivCenterContent" class="masterCenterContent">
<asp:Panel id="MainContent" class="masterMainContent" runat="server">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</asp:Panel>
</div>

</div>
</div>

</form>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1