Make DIV Fit from the Bottom?

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

xeroxero - 19 Sep 2006 21:50 GMT

I have two div tags, each with a fixed width that does not scroll of
300px. The first one has visibility un/set via JavaScript depending on
a certain condition. I want the second div to start at the bottom of
the page, and fill "upward" - if the first div is hidden, then it
should fill to the top; if the first div is visible, the second should
fill upward to the bottom of the first div.

How can I do that?

Thanks.

Reply to this Message

Walter Wang [MSFT] - 20 Sep 2006 04:26 GMT

Hi,

You can use the element's .style.display property to show/hide the first
div. For example:

<!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=utf-8" />
<title>Hello World</title>
<style type="text/css">
    #l1 {
        position:relative;
        left:0px;
        top:0px;
        width:400px;
        height:300px;
        border:thin;
    }
    #l2 {
        position:relative;
        left:0px;
        top:0px;
        width:400px;
        height:300px;
        border:thin;
    }
}
</style>

<script type="text/javascript" language="javascript">
function showHideL1() {
    if (l1.style.display == "") {
        l1.style.display = "none";
    } else {
        l1.style.display = "";
    }
}
</script>
</head>

<body>
    <div id="l1">Left 1</div>
    <div id="l2">Left 2</div>
    <input type="button" value="show/hide" onclick="showHideL1();" />
</body>

</html>

For more information, please refer to:

http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/pos_06.htm
http://msdn.microsoft.com/workshop/author/position/positioning.asp?frame=tru
e#Controlling_Content_

Please let me know whether or not you need further information. Thanks.

Sincerely,
Walter Wang (wawang@online.microsoft.com, remove 'online.')
Microsoft Online Community Support

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications. If you are using Outlook Express, please make sure you clear the
check box "Tools/Options/Read: Get 300 headers at a time" to see your reply
promptly.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

Reply to this Message

Webmaster Forum / Browsers / Internet Explorer / September 2006

Make DIV Fit from the Bottom?