Jquery DIV标签高度赢得'；t拉伸以填充父空间_Jquery_Css_Html_Height

Jquery DIV标签高度赢得'；t拉伸以填充父空间

jquery css html

Jquery DIV标签高度赢得'；t拉伸以填充父空间,jquery,css,html,height,Jquery,Css,Html,Height,我试图获取一个嵌套的DIV标记，其中包含一个Object标记，以扩展到其父容器的剩余空间我有的是页眉内容页脚模板，由3个DIV标记组成。content DIV有一个包含另一个HTML页面的对象。页眉和页脚的高度设置为绝对像素值。我想让内容组占据剩下的空间。无论我做什么，似乎我能想出的最好办法就是将DIV内容标签设置为屏幕高度的100%。代码如下： <body> <div id="pageWrap"> <div id="page"> <div i

我试图获取一个嵌套的DIV标记，其中包含一个Object标记，以扩展到其父容器的剩余空间

我有的是页眉内容页脚模板，由3个DIV标记组成。content DIV有一个包含另一个HTML页面的对象。页眉和页脚的高度设置为绝对像素值。我想让内容组占据剩下的空间。无论我做什么，似乎我能想出的最好办法就是将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>


$（文档）.ready（函数（）{
$（“#header”）.load（'header.jsp'）；
});
$（文档）.ready（函数（）{
$（“#footer”）.load（'footer.jsp'）；
});

任何解决方案都是好的，jQuery、CSS或其他

谢谢你的帮助

Ggilmann

如果你给你的页眉和页脚提供了一个非常精确的位置，那么你能用百分比值吗

比如：

#header {
height:20%;
}

#footer {
height: 20%;
}

#div {
height: 60%;
}

我想这和我几周前回答的一个问题是一样的：

问题是，我的页眉和页脚高度是通过外部css设置的，我无法控制该css。否则，我可能会这么做。谢谢如果在外部CSS之后包含自己的CSS，则具有优先权，并且可以通过添加上述内容轻松覆盖任何样式。正如henrik所说，您可以使用内联CSS定义高度，除非在外部CSS中声明！重要的是从我所看到的使用，这完全覆盖了外部样式，对吗？有没有一种方法可以继承样式并添加一些样式元素？我想我回答得太快了，我似乎在定义自己的样式时遇到了一些问题。我尝试了你在另一个线程中给出的解决方案，但我无法让它工作。我的content Div标签中包含的对象似乎覆盖了height和width属性，并且总是100%全屏显示。很难说，你的页面上可能有一大堆我不知道的标记！尝试仅使用我的标记创建新的干净页面，然后添加对象。如果您不坚持使用xhtml strict，您可能想尝试使用iframe来代替它？好吧，我最终使用了这个解决方案的一个变体，所以我将把它标记为答案。