有没有办法在没有JavaScript的情况下扩展div？_Javascript_Jquery_Html_Css

有没有办法在没有JavaScript的情况下扩展div？

javascript jquery html css

有没有办法在没有JavaScript的情况下扩展div？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在制作一个有页眉、内容和页脚部分的模板。内容为iframe，固定宽度为1000px，浮动在屏幕中心。我希望页眉和页脚始终可见。即，将为iframe显示scroolbar。我已经搜索了stackoverflow，但我的问题没有解决方案。这两页似乎很接近，但它们没有回答我的问题：我用JQuery解决了这个问题，但我认为只有使用CSS（也没有javascript）才有更简单的方法这是我的代码（全部集成在一个HTML中，只需要jquery）： html，正文{ 身高：100%；保证

我正在制作一个有页眉、内容和页脚部分的模板。内容为iframe，固定宽度为1000px，浮动在屏幕中心。我希望页眉和页脚始终可见。即，将为iframe显示scroolbar。我已经搜索了stackoverflow，但我的问题没有解决方案。这两页似乎很接近，但它们没有回答我的问题：

我用JQuery解决了这个问题，但我认为只有使用CSS（也没有javascript）才有更简单的方法

这是我的代码（全部集成在一个HTML中，只需要jquery）：


html，正文{
身高：100%；
保证金：0；
填充：0；
边界：无；
}
#标题{
宽度：100%；
高度：150像素；
背景色：红色；
}
#身体{
宽度：100%；
身高：100%；
背景颜色：蓝色；
}
#页脚{
高度：50px；
背景颜色：橙色；
}
iframe{
显示：块；
宽度：1000px；
身高：100%；
边距：0自动0自动；
填充：0；
背景颜色：黄色；
边界：无；
}
无标题文件
标题文本
您的浏览器不支持iFrame
页脚文本
变量页眉页脚高度=0；
$（文档）.ready（函数（e）{
页眉页脚高度=$（“#页眉”）.HEIGHT（）+$（“#页脚”）.HEIGHT（）；
$（“#body”）.height（$（window）.height（）-页眉页脚高度）；
});
$（窗口）。调整大小（函数（）{
$（“#body”）.height（$（window）.height（）-页眉页脚高度）；
});

编辑：我找到了一个解决方案。请参阅下面的内容。

< P>我认为对于动态CSS，您可以考虑更少：

<代码>。 html，正文{ 身高：100%；保证金：0；填充：0；边界：无； } #标题{ 位置：绝对位置；排名：0；宽度：100%；高度：150像素；背景色：红色； } #身体{ 位置：绝对位置；顶部：150px；底部：50px；宽度：100%；背景颜色：蓝色； } #页脚{ 位置：绝对位置；宽度：100%；底部：0；高度：50px；背景颜色：橙色； } iframe{ 显示：块；宽度：1000px；身高：100%；边距：0自动0自动；填充：0；背景颜色：黄色；边界：无； } 无标题文件标题文本您的浏览器不支持iFrame 页脚文本

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

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

您可以这样做：

我猜这就是你想要的。。。它并不是真正的IE6友好，但需要一些努力才能做到（因为您可以在IE6中进行计算）。我还建议你去掉iframe等

如果需要将iframe本身居中，那么这可能会有点棘手。然而，我想知道如何使用滚动条。我认为如果你让iframe的内容自己居中，让滚动条保持在最右边，会更漂亮

下面是一个例子：

检查其他答案，这大致就是您的操作方式，但我认为我的示例更简洁。

如果您想要流体界面，在CSS中不太可能。CSS不能做计算，所以你不能做“100%-50px”之类的事情（如果W3C的CSS小组没有患颅底插入综合征，这将非常方便）。你必须使用固定高度并适当设置数字。是的，我在FF中找到了这个“calc（）”方法或类似的方法，但显然没有其他浏览器支持它，然后FF也放弃了支持。不过我不确定，“有没有办法不用jQuery来扩展div？”-是的，当然有。jQuery只是JavaScript，尽管它非常聪明，所以它所能做的一切都可以通过编写自己的JavaScript等价物来完成。看看jQuery.height（）函数代码……我是说没有javascript。但是谢谢你提出来。我编辑了这个问题。我找到了一个只需要CSS的解决方案。请看问题。我把它放在那里了。例如，LESS仍然不能

100%-50px

。我认为这里的解决方案是JavaScript。

<!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>

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