html – 全高和全宽CSS布局

我正在寻找一种方法来创建一个仅CSS(无 JavaScript)布局,其中有5个区域如下所示：

┌────────────────────┐
   │          H         │
   ├────┬────────┬──────┤
   │    │        │      │
   │    │        │      │
   │    │        │      │
   │  A │    B   │  C   │
   │    │        │      │
   │    │        │      │
   │    │        │      │
   ├────┴────────┴──────┤
   │          F         │
   └────────────────────┘

(仅当您的字体具有Unicode框线绘图字符时,上图才会正确显示.)

布局必须完全填写网络浏览器中的可用空间(高度和宽度).
A,B,C必须具有相同的高度; H和F必须具有相同的宽度.也就是说,除固定利润之外,区域之间不能有差距.
区域内的元素应该知道他们的父母的大小;这意味着,如果我放置

<textarea style="width:100%;height:100%">Just a test</textarea>

在一个区域内,它将延伸到该区域的全宽和高度.
在浏览器窗口的右侧不应有滚动条(因为H,C和F的高度恰好与浏览器客户区的高度相加).

如果您使用的是< table>,则这是非常容易的做布局.但是我继续阅读,使用表格进行格式化是一件坏事,CSS是要走的路.

我知道有W3C工作组通过功能扩展CSS标准,使上述布局非常容易实现.然而,这些标准扩展目前尚未被大多数浏览器实现;我需要一个适用于当前浏览器的解决方案.

我一直在寻找包含CSS样式样本的许多网页,但是没有一个可以做上述的描述.大多数这些布局既不是全高度的,或者列具有不同的高度,或者它们需要JavaScript.

因此,我的问题是：是否可以创建上述布局,只使用CSS(没有JavaScript,没有人造柱,没有< table>)？当然,该解决方案应该与当前的Web浏览器配合使用.

编辑：根据Gilsham提供的解决方案,我设法编写一个示例页面,生成所需的仅CSS布局(使用Firefox 3.5.5和IE8进行测试)：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{
    height:100%;    
    margin:0;
    padding:0;
    border:0;
}
 
div{
    margin:0;
    border:0;
}
 
textarea {
    margin:0;
    border:0;
    padding:0;
    height:100%;
    width:100%;
}
 
.content{
    display:table;
    width:100%;
    border-collapse:separate;
    height:80%;
}
 
.Col{
    display:table-cell;
    width:30%;
    height:100%;
}
 
#header,#footer{
    height:10%;
    position:relative;
    z-index:1;
}
 
</style>
</head>
<body>
<div id="header"><textarea style="background-color:orange;">H Just a test</textarea></div>
<div class="content">
    <div id="left" class="Col"><textarea style="background-color:lightskyblue;">A Just a test</textarea></div>
    <div id="center" class="Col"><textarea style="background-color:green;">B Just a test</textarea></div>
    <div id="right" class="Col"><textarea style="background-color:lime;">C Just a test</textarea></div>
</div>
<div id="footer"><textarea style="background-color:yellow;">F Just a test</textarea></div>
</body>
</html>

一个缺点是必须以特定的顺序指定div,这对搜索引擎优化和屏幕阅读器是不利的;但是,对于预期的Web应用程序来说,这并不重要.

/弗兰克

解决方法

http://jsfiddle.net/aGG3V/

设置页眉和页脚的高度,你必须设置它的风格以及.content的填充和边距(这是负版本)

html – 全高和全宽CSS布局

解决方法

猜你在找的HTML相关文章