Question

我正在尝试获取包含Object标记的嵌套DIV标记，以扩展到其父容器剩余空间。

我所拥有的是包含3个DIV标签的header-content-footer模板。内容DIV具有包含另一HTML页面的对象。页眉和页脚的高度设置为绝对像素值。我希望内容DIV占用剩余的空间。无论我做什么，似乎我能想到的最好的是将DIV内容标签设置为屏幕高度的100％。这是代码：

<body>
<div id="pageWrap">
<div id="page">
    <div id="header" style="height:68px;"></div>
    <script type="text/javascript">
            $(document).ready(function() {
                $("#header").load('header.jsp');
            });
    </script>
    <div id="mapLocation" style="width:100%; height:100%; overflow:auto;">
    <object type="text/html" style="width:100%; height:100%;" data="top/index.html"></object>
    </div>
    <div id="footer"></div>
    <script type="text/javascript">
        $(document).ready(function() {
                $("#footer").load('footer.jsp');
        });
    </script>
</div>
</div>
</body>

任何解决方案都很好，jQuery，CSS或其他！

感谢您的帮助

Ggilmann

Answer 1

如果您为页眉和页脚提供绝对位置，何时可以使用百分比值？

类似的东西：

#header {
height:20%;
}

#footer {
height: 20%;
}

#div {
height: 60%;
}

Answer 2

认为这与我几周前回答的问题相同： Page fills window with content filling the gap

DIV标签高度不会拉伸以填充父空间

2 个答案: