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一样，对象无法“知道”其中内容的高度。

有关使用iframe和一些javascript的解决方案，请参见此处：Adjust width and height of iframe to fit with content in it

不过，您可以为包含的html文件中的元素指定尺寸明确的特定类，并在父文档中使用相同的类来接近您想要实现的目标。

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

1 个答案: