How to adjust height of embedded html objects using percents?

Question

I am trying to use embedded html pages to modularize a version of my webpage using ONLY HTML and CSS. However, the object web elements do not respond to percentages in the CSS. They will respond to vh, but that's not relevant to the contents of the embedded HTML page.

I've played a little with iframe to the same result, and I'm aware of Media Queries, but I'm not quite up to that just yet.

Is there a way to set the height of objects (or equivalently embedded objects) by percent, or another means to set the height based on the contents of the embedded page.

Index.html:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link href="./Styles/Main.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="idGeneralLayout">
            <header id="idHeaderRow">
                <object data="./Universal/Logo.html">
                    Warning: Header could not be included!
                </object>
            </header>
            <nav id="idNavigationBar">
                <object data="./Universal/Navbar.html">
                    Warning: Navigation Bar could not be included!
                </object>
            </nav>
            <div id="idCenterRow">
                <div id="idCenterRowLeft">
                    <object class="classSectionHeader" data="./Universal/NavigationHeader.html">
                        Warning: Navigation Header could not be included!
                    </object>
                    <object class="classSectionContent" data="./Navigation.html">
                        Warning: Navigation could not be included!
                    </object>
                </div>
                <div id="idCenterRowMain">
                    <object data="./Content/Content_Index.html">
                        Warning: Content could not be included!
                    </object>
                </div>
                <div id="idCenterRowRight">
                    <object class="classSectionHeader" data="./Universal/InformationHeader.html">
                        Warning: Information Header could not be included!
                    </object>
                    <object class="classSectionContent" data="./Content/Versions_Index.html">
                        Warning: Versions could not be included!
                    </object>
                </div>   
            </div>
            <footer id="idFooterRow">
                <object data="./Universal/Footer.html">
                    Warning: Footer could not be included!
                </object>
            </footer>
        </div>
    </body>
</html>

Logo.html:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link href="../Styles/Main.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="idInnerLayout">
            <img id="idLogo" src="../Pictures/logoHTKB.jpg"><br>
        </div>
    </body>             
</html>

Main.css: (abridged)

object
{
    width: 100%;
    height: auto !important;
    overflow: hidden;

    border: 0px solid #FE0101;
    vertical-align: top;
}

#idGeneralLayout
{
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;

    background-color: #000000;
    border: 0px solid #FE0101;
    vertical-align: top;
}

#idInnerLayout
{
    width: 100%;
    max-width: 100%;
    min-height: auto !important;
    max-height: 100%;

    background-color: #000000;
    border: 0px solid #FE0101;
    vertical-align: top;
}

#idHeaderRow
{
    width: 100%;
    max-width: 100%;
    height: 44%;
    max-height: 44%;
    border: 0px solid #FE0101;
    vertical-align: top;
}

#idLogo
{
    width: 100%;
    max-width: 100%;
    height: 50%;
    max-height: 50%;

    border: 0px solid #FE0101;
    vertical-align: top;
}

score 0 · Accepted Answer · answered Nov 24 '18 at 20:24

0

Not without using some script or another, no. Just like an iframe, the object cannot "know" the height of the content that is within it.

See here for a solution using iframes and some javascript: Adjust width and height of iframe to fit with content in it

You can however give the elements within your included html-files specific classes with well definded sizes, and use those same classes in your parent document to maybe get close to what you want to achieve.

answered Nov 24 '18 at 20:24

yinken

423
4
11

Hmm, the well defined sizes approach seems like a good idea, but could also be accomplished with media queries. I might just be able to do a vh substitute after the percents, but I was really hoping for a way for the object to "read" the size of the embedded page. And you can't set a height to the height of another id, which would be perfect. – Kamurai Nov 24 '18 at 20:37
Actually....I guess I could manually set the height to the height of each page in px, yes? – Kamurai Nov 24 '18 at 20:39
Yes. Let's say you have an object with the class 'navbar' giving it a height of 500px that includes an html file with another element that uses the same class, you should _kind of_ get what you want – yinken Nov 24 '18 at 20:47
Annnnd nope. I tried assigning the object by px and on inspection, it lines through it. I'll keep looking for an option. – Kamurai Nov 25 '18 at 21:28
Playing with things, there was another solution blocking our pixel solution. I can arbitrarily set the height of objects for a (subpar) solution. – Kamurai Dec 01 '18 at 21:07

How to adjust height of embedded html objects using percents?

1 Answers1