如何使用百分比调整嵌入 html 对象的高度？

Question

我正在尝试使用嵌入式 html 页面来模块化我的网页版本，仅使用 HTML 和 CSS。但是，对象 Web 元素不响应 CSS 中的百分比。他们会回复 vh，但这与嵌入式 HTML 页面的内容无关。

我对 iframe 进行了一些尝试，得到了相同的结果，并且我知道媒体查询，但我还没有完全做到这一点。

有没有办法通过百分比设置对象（或等效的嵌入对象）的高度，或者其他方法根据嵌入页面的内容设置高度。

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：（删节）

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;
}

Answer 1

不是没有使用某些脚本或其他脚本，不是。就像 iframe 一样，对象不能 "know" 其内容的高度。

在这里查看使用 iframe 和一些 javascript 的解决方案：Adjust width and height of iframe to fit with content in it

然而，您可以在包含的 html 文件中指定具有明确大小的特定类的元素，并在您的父文档中使用相同的类可能接近你想要达到的目标。

如何使用百分比调整嵌入 html 对象的高度？

How to adjust height of embedded html objects using percents?

html

css

object

height