?
Solved

<object> not resizing correctly by css

Posted on 2009-02-14
2
Medium Priority
?
393 Views
Last Modified: 2012-05-06
Hi,
I have used the "CSS Sticky Footer" from Ryan Fait (http://ryanfait.com/sticky-footer) to create a page where there is a footer div always displayed at the bottom of the page. This works perfectly until I put an <object> element in the main part of the page. It looks like the object element is causing the containing <div> to not resize correctly. The page code is included and you can fee the problem by removing the div with id="someothercontent" and uncommenting the <object>. Can anyone suggest a solution to this? Or suggest another way of embedding an entire external web page in a manner where I can access it's content? (The background colours are just there to make the div locations clearer!)

This is driving me nuts now!

Andy.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="postest.aspx.vb" Inherits="postest" %>
<!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 runat="server">
    <title>Test page</title>
    <style>
        * 
        {
	        margin: 0;
        }
        html, body 
        {
	        height: 100%;
        }
        #wrapper 
        {
	        min-height: 100%;
	        height: auto !important;
	        height: 100%;
	        margin: 0 auto -50px;
	        background-color: Red;
        }
        #footer
        {
	        height: 50px;
	        background-color: Blue;
        }
        #push 
        {
	        height: 50px; 
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="someothercontent" style="height:100%;">
            <h1>Some text goes here.</h1>
        </div>
        <!--
        <object id="pageholder" type="text/html" data="http://en.wikipedia.org/wiki/Internet" width="100%" height="100%">
            <p>
                Error loading page</p>
        </object>
        -->
        <div id="push"></div>
    </div>
    <div id="footer">
        <div style="height:50px;">
            <h1>FOOTER GOES HERE</h1>
        </div>
    </div>
</body>
</html>

Open in new window

0
Comment
Question by:andycrellin
2 Comments
 
LVL 9

Expert Comment

by:knonie
ID: 23640546
Remove 100% height from  [Or you may decrease its value]
and decrease height="100%" in  to 88% or less.

Sample code below:

:-)
<!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 runat="server">
    <title>Test page</title>
    <style>
        * 
        {
                margin: 0;
        }
        html, body 
        {
                height: 100%;
        }
        #wrapper 
        {
                min-height: 100%;
                height: auto !important;
                height: 100%;
                margin: 0 auto -50px;
                background-color: Red;
        }
        #footer
        {
                height: 50px;
                background-color: Blue;
        }
        #push 
        {
                height: 50px; 
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="someothercontent">
            <h1>Some text goes here.</h1>
        </div>
        <object id="pageholder" type="text/html" data="http://en.wikipedia.org/wiki/Internet" width="100%" height="88%">
            <p>Error loading page</p>
        </object>
        <div id="push"></div>
    </div>
    <div id="footer">
        <div style="height:50px;">
            <h1>FOOTER GOES HERE</h1>
        </div>
    </div>
</body>
</html>

Open in new window

0
 

Accepted Solution

by:
andycrellin earned 0 total points
ID: 23640898
I'm afraid neither of these work.
Removing 100% makes the <object> invisible (I think it ends up with a height of 0px) and using 88% (or any other number) is incorrect because the height of the object is not 88% of the height of the container (except for the single unique situation where the browser window height is such that using 88% _happens_ to be correct). The height of the <object> is actually always viewportheight minus footerheight.
View your code in a browser and change the browser window height - you'll see that the footer disappears as you shrink the browser height - it doesn't "stick" to the bottom of the page.

I've actually taken a different tack to solve the problem myself (using iframes and an onresize event handler), but I'm still interested in finding a solution to the <object> problem.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question