Question

我已经对CSS全屏布局做了很多研究，我似乎无法找到像我正在尝试做的事情。我正在寻找一个带有页眉，页脚，多列和侧边栏的全屏布局。这是一个ascii模型，然后是一个photoshop模型。有人有主意吗？我还没有找到全屏布局技术。

+-----------------------+-------+
|                       |       |
+-------------+---------+       +
|             |         |       |
|             |         |       |
|             |         |       |
|             |         |       |
|             |         |       |
|             |         |       |
+-------------+---------+-------+
|                               |
+-------------------------------+

Layout Prototype

那么告诉我，您认为如何实现这一目标？我对CSS 3或HTML 5选项持开放态度，因为跨浏览器兼容性是一个奖励，但不是必需的（WebKit是目标平台）。

Answer 1

请参阅以下代码： http://jsfiddle.net/davinciwanab/nX4eq/

<style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            }
        #header {
            float: left;
            width: 75%;
            height: 20px;
            background-color: #333;
            }
        #colRight {
            float: right;
            width: 25%;
            height: 500px;
            background-color: #CCC;
            }
        #content {
            float: left;
            width:  50%;
            height: 480px;
            background-color: #EEE;
            }
        #contentRight {
            float: left;
            width: 25%;
            height: 480px;
            background-color: #AAA;
            }
        #footer {
            width: 100%;
            height: 20px;
            background-color: #777;
            }
    </style>
</head>

<body>
    <div id="header"></div>
    <div id="colRight"></div>
    <div id="content"></div>
    <div id="contentRight"></div>
    <div style="clear:both;"></div>
    <div id="footer"></div>
</body>

Answer 2

这是一个粗略的线框

http://jsfiddle.net/samccone/UYeEr/

全屏CSS布局挑战（带有/页眉和页脚的多列）

2 个答案: