Fullscreen CSS Layout Challenge (Multi-column w/ Header and Footer)_问答_开发者

Fullscreen CSS Layout Challenge (Multi-column w/ Header and Footer)

开发者 https://www.devze.com 2023-03-01 20:56 出处：网络

I\'ve done quite a bit of research on CSS fullscreen layouts I just couldn\'t seem开发者_如何学Python to find something like what I\'m trying to do. I\'m looking for a fullscreen layout with a header,

I've done quite a bit of research on CSS fullscreen layouts I just couldn't seem开发者_如何学Python 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.

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

Fullscreen CSS Layout Challenge (Multi-column w/ Header and Footer)

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).

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>

here is a rough wireframe

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