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

发布于 2024-11-04 16:45:00 字数 723 浏览 4 评论 0原文

我对 CSS 全屏布局做了相当多的研究，但我似乎找不到像我想做的事情。我正在寻找带有页眉、页脚、多列和侧边栏的全屏布局。这是一个 ASCII 模型，然后是一个 Photoshop 模型。有人有什么想法吗？我还没有找到可行的全屏布局技术。

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

Layout Prototype

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

原文

I've done quite a bit of research on CSS fullscreen layouts I just couldn't seem to find something like what I'm trying to do. I'm looking for a fullscreen layout with a header, footer, multiple columns, and a sidebar. Here's an ascii model and then a photoshop mockup. Anyone have any ideas? I'm yet to find a fullscreen layout technique to work.

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

Layout Prototype

So tell me, how do you think this could be accomplished? I'm open to CSS 3 or HTML 5 options as cross-browser compatibility is a bonus, but not a necessity (WebKit is the target platform).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

微暖i 2024-11-11 16:45:00

在这里查看下面的代码：
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>

See the below code in action here:
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>

回复收藏 0 原文