Html 如何创建简单的头部/中心/脚部布局？
我想做的事情听起来非常简单，但由于某种原因我无法让它工作。。。我想要一个具有特定大小的块元素，它有三个子块元素：页眉、中心区域和页脚。它必须具有以下特征：Html 如何创建简单的头部/中心/脚部布局？,html,css,Html,Css,我想做的事情听起来非常简单，但由于某种原因我无法让它工作。。。我想要一个具有特定大小的块元素，它有三个子块元素：页眉、中心区域和页脚。它必须具有以下特征： 页眉和页脚的高度仅与内容所需的高度相同。这个内容是动态的，所以我不能在这里使用固定大小。假设标题中的文本是本地化的。它可以是短英文文本（一行）或长法文文本（换行为两行） 中心区域占据所有其他空间。我的意思是它确实占据了所有的空间，而且它不只是位于中心的顶部。因此，如果中心元素具有背景色，则该颜色必须在页眉和页脚之间的整个空间中可见。或者，如
- 页眉和页脚的高度仅与内容所需的高度相同。这个内容是动态的，所以我不能在这里使用固定大小。假设标题中的文本是本地化的。它可以是短英文文本（一行）或长法文文本（换行为两行）
- 中心区域占据所有其他空间。我的意思是它确实占据了所有的空间，而且它不只是位于中心的顶部。因此，如果中心元素具有背景色，则该颜色必须在页眉和页脚之间的整个空间中可见。或者，如果中心元素是图像，则必须将其拉伸到页眉和页脚之间的区域
- 所有尺寸在创建时都是未知的，因此使用绝对定位不起作用。另外，对中心元素使用常用的边距技巧也不起作用，因为页眉/页脚的高度是未知的，因为它是动态的
- 没有JavaScript攻击
- 必须在IE7+、FF3+、Chrome和Safari中工作
<div style="width: 512px; height: 512px">
<div class="head">This is the header</div>
<div class="center">This is the center area</div>
<div class="foot">This is the footer</div>
</div>
我正在搜索的是一些CSS代码，以使上述HTML代码（或任何替代HTML代码，甚至允许使用真正的HTML表格）如上所述显示，并与上面列出的所有标准相匹配。如果需要，只需将表格的宽度设置为98%左右即可 你没有发布你的CSS代码。您是否尝试设置
头部脚一句话：你的HTML看起来不错。（您描述的唯一问题涉及到一个使用HTML的表，您甚至没有发布。）您发布的HTML有什么问题？您可以使用相对和绝对定位。使内容达到浏览器窗口的100%高度；绝对将标题置于屏幕顶部；同样，绝对地将页脚放在页面底部；然后在内容的另一个
页边距顶部设置为与页眉相同的高度，并将填充底部设置为与页脚相同的高度
您的HTML应该是这样的：
+--------------------------+
| This is the header |
+--------------------------+
| This is the center area |
| |
| |
| |
| |
| |
+--------------------------+
| This is the footer |
+--------------------------+
<html>
<head>
...
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="content">
<div class="inner">
<!-- place margins on this element -->
</div>
</div>
<div id="footer">
</div>
</div>
</body>
<html>
这是未经测试和一笔勾销的，因此可能需要一些调整，但这是前提
此外，我更喜欢使用ID作为元素，如页眉、页脚、主要内容包装，因为理论上一个页面上只有一个ID。UPDATE
这是另一把小提琴
内容不会有100%的高度，但您可以使用JavaScript更改高度。目前，我还不知道如何通过纯CSS实现这一点
我希望这有帮助。
赫里斯托
看看这把小提琴：
马修·詹姆斯·泰勒（Matthew James Taylor）的网站实际上相当不错，他的布局绝对不是骗局：）但你有权发表自己的意见。总之，这里是简单的页眉/内容/页脚布局
我希望这有帮助。
Hristo由于多余，示例中的标记太多。尝试：
<style>
.box {
width: 512px; height: 512px;
position:relative;
border:1px solid black;
}
.head {
background:white;
border:1px solid red;
}
.foot {
width:100%;
background:white;
position:absolute;
bottom:0;
border:1px solid blue;
}
</style>
<div class="box">
<div class="head">This is the header</div>
<p>The is the center area</p>
<div class="foot">This is the footer</div>
</div>
.盒子{
宽度：512px；高度：512px；
位置：相对位置；
边框：1px纯黑；
}
.头{
背景：白色；
边框：1px纯红；
}
.英尺{
宽度：100%；
背景：白色；
位置：绝对位置；
底部：0；
边框：1px纯蓝色；
}
这是标题
这是中心区
这是页脚
修改为包含图像作为示例：
<style>
.box {
width: 512px; height: 512px;
background:url("http://www.desktops-wallpapers.com/Exports%20from%20Aperture/Trees/1280_1024/row_of_pine_trees.jpg");
position:relative;
border:1px solid black;
}
.head {
background:white;
border:1px solid red;
}
.foot {
width:100%;
background:white;
position:absolute;
bottom:0;
z-index:2;
border:1px solid blue;
}
</style>
<div class="box">
<div class="head">This is the header</div>
<p>The is the center area</p>
<div class="foot">This is the footer</div>
</div>
.盒子{
宽度：512px；高度：512px；
背景：url（“http://www.desktops-wallpapers.com/Exports%20from%20Aperture/Trees/1280_1024/row_of_pine_trees.jpg");
位置：相对位置；
边框：1px纯黑；
}
.头{
背景：白色；
边框：1px纯红；
}
.英尺{
宽度：100%；
背景：白色；
位置：绝对位置；
底部：0；
z指数：2；
边框：1px纯蓝色；
}
这是标题
这是中心区
这是页脚
我对此进行了研究，发现了这个链接，它描述了一种做类似于您想要的事情的技巧。唯一不同的是，如果内容大于页面大小，则内容将滚动。不过，我发现它很有用，并将在我的网页上这样做
body{margin:0}
.row、.col{溢出：隐藏；位置：绝对；}
.行{左：0；右：0；}
.col{top:0；bottom:0；}
.scroll-x{overflow-x:auto；}
.scroll-y{overflow-y:auto；}
.header.row{高度：122px；顶部：0；背景色：红色；}
.body.row{顶部：122px；底部：24px；背景色：黄色；}
.footer.row{高度：24px；底部：0；背景色：绿色；}
我的头球
身体
我的页脚
我正在搜索正在工作的CSS。我没有发布CSS，因为我没有可用的CSS。那是我的问题。我提到了一个表，因为我试着用一个表来代替div（正如我写的那样），但这也不起作用。因此，不需要将此HTML代码保留为四个div。如果有一个解决方案使用一个表或多个div，那么只要它符合列出的特征，就可以了。@kayahr：我不太愿意回答，因为我只想再次问同样的问题。你发布的HTML有什么问题吗？没有什么问题（除了我找不到可以工作的CSS代码来获得我需要的结果）。这只是一个例子，是一个起点。这并不是必须严格遵守的HTML代码
<style>
.box {
width: 512px; height: 512px;
background:url("http://www.desktops-wallpapers.com/Exports%20from%20Aperture/Trees/1280_1024/row_of_pine_trees.jpg");
position:relative;
border:1px solid black;
}
.head {
background:white;
border:1px solid red;
}
.foot {
width:100%;
background:white;
position:absolute;
bottom:0;
z-index:2;
border:1px solid blue;
}
</style>
<div class="box">
<div class="head">This is the header</div>
<p>The is the center area</p>
<div class="foot">This is the footer</div>
</div>
body { margin: 0 }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.header.row { height: 122px; top: 0; background-color: red;}
.body.row { top: 122px; bottom: 24px; background-color: yellow;}
.footer.row { height: 24px; bottom: 0; background-color: green;}
</style>
</head>
<body>
<body>
<div class="header row">
<h2>My header</h2>
</div>
<div class="body row scroll-y">
The body
</div>
<div class="footer row">
My footer
</div>
</body>
</body>
</html>