Question

我正在处理一个包含标题，内容和页脚部分的模板。内容为iframe，并且具有浮动在屏幕中心的1000px的固定宽度。我希望页眉和页脚始终可见。即。将为iframe显示scroolbar。我搜索了stackoverflow，我的问题无法解决。这两页似乎很接近，但它们没有回答我的问题：

Expand a div to take the remaining width

Expand div to max width when float:left is set

我用JQuery解决了这个问题，但我怀疑只有CSS（没有javascript）才有更简单的方法。

这是我的代码（所有在一个HTML中，只需要jquery）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
html, body {
    height:100%;
    margin:0;
    padding:0;
    border:none;
}
#header {
    width:100%;
    height:150px;
    background-color:red;
}
#body {
    width:100%;
    height:100%;
    background-color:blue;
}
#footer {
    height:50px;
    background-color:orange;
}
iframe {
    display:block;
    width:1000px;
    height:100%;
    margin:0 auto 0 auto;
    padding:0;
    background-color:yellow;
    border:none;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="header">Header text</div>
<div id="body">
  <iframe src="http://www.google.com"> iframes are not supported on your browser </iframe>
</div>
<div id="footer">Footer text</div>
<script type="text/javascript">
var HEADER_FOOTER_HEIGHT=0;
$(document).ready(function(e) {
    HEADER_FOOTER_HEIGHT=$("#header").height()+$("#footer").height();
    $("#body").height($(window).height()-HEADER_FOOTER_HEIGHT);
});
$(window).resize(function() {
    $("#body").height($(window).height()-HEADER_FOOTER_HEIGHT);
});
</script>
</body>
</html>

编辑：我找到了解决方案。请参阅下文。

Answer 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
    height:100%;
    margin:0;
    padding:0;
    border:none;
}
#header {
    position:absolute;
    top:0;
    width:100%;
    height:150px;
    background-color:red;
}
#body {
    position:absolute;
    top:150px;
    bottom:50px;
    width:100%;
    background-color:blue;
}
#footer {
    position:absolute;
    width:100%;
    bottom:0;
    height:50px;
    background-color:orange;
}
iframe {
    display:block;
    width:1000px;
    height:100%;
    margin:0 auto 0 auto;
    padding:0;
    background-color:yellow;
    border:none;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="header">Header text</div>
<div id="body">
  <iframe src="http://www.google.com"> iframes are not supported on your browser </iframe>
</div>
<div id="footer">Footer text</div>
</body>
</html>

Answer 2

我认为您可以考虑使用动态CSS：http://lesscss.org/

Answer 3

尝试这些更改，它对我有用。

#header {
    background-color: red;
    height: 150px;
    position: absolute;
    top: 0;
    width: 100%;
}
#body {
    background-color: blue;
    bottom: 50px;
    position: absolute;
    top: 150px;
    width: 100%;
}
#footer {
    background-color: orange;
    bottom: 0;
    height: 50px;
    position: absolute;
    width: 100%;
}

Answer 4

你可以这样做：

http://jsfiddle.net/2KRmn/1/

我猜这就是你想要的......它不是真正的IE6友好但它可能会有一些努力（因为你可以在ie6中进行计算）。我还建议你摆脱iframe等。

如果您需要iframe本身居中，那么这可能会更棘手。但是我想知道那对滚动条有什么用呢。如果你让iframe的内容无论如何都要自己居中，让滚动条保持在最右边，我觉得它更漂亮。

无论如何，这是一个例子：http://jsfiddle.net/2KRmn/2/

检查其他答案，这大致就是你这样做的方式，但我认为我的例子更清晰。

有没有办法在没有JavaScript的情况下拉伸div？

4 个答案: