如何使页眉和标题和左侧栏？ [英] How to make a page with header and left-sidebar?

问题描述

我想建立这样的网页：

|----------------------------|
|            header          |
|----------------------------|
|  L  |                      |
|  e  |                      |
|  f  |                      |
|  t  |                      |
|     |                      |
|  S  |   Content Area       |
|  i  |                      |
|  d  |                      |
|  e  |                      |
|  b  |                      |
|  a  |                      |
|  r  |                      |
|----------------------------|

标题有固定的高度，但宽度应该是动态的。左侧栏应具有固定宽度，但动态高度。对于内容区域，高度和宽度都是动态的。当用户缩放浏览器时，滚动条不应该出现（不要设置overflow：hidden;隐藏它。）

The header has a fixed height but it's width should be dynamic. The left-sidebar should have a fixed width but a dynamic height. For the content area, both height and width are dynamic. When user scale their browser, the scrolling bar should not appear(not set overflow:hidden; to hide it.).

我试图写这样的代码： p>

I tried to write code like this:

<div class="top">
    TOP
</div>
<div class="left">
    LEFT
</div>
<div class="main">
    MAIN
</div>

使用CSS：

.top {
    width: 100%;
    height: 92px;
}
.left {
    width: 178px;
    height: 100%;
    float:left;
}
.main {
    float: left;
    height: 100%;
    width: 100%;
 }

但它失败。

有什么解决方案吗？
感谢高级。

Is there any solution for this? Thanks in advanced.

编辑：内容区和左侧栏必须填满整个浏览器窗口.....
不需要

|----------------------------|
|            header          |
|----------------------------|
|  L  |                      |
|  e  |                      |
|  f  |                      |
|  t  |                      |
|     |                      |
|  S  |   Content Area       |
|  i  |                      |
|  d  |----------------------|
|  e  |
|  b  |
|  a  |
|  r  |
|-----|

推荐答案

example at jsFiddle

.top {
    position:absolute;
    left:0; right:0;
    height: 92px;
}
.left {
    position:absolute;
    left:0; top:92px; bottom: 0;
    width: 178px;
}
.main {
    position: absolute;
    left:178px; top:92px; right:0; bottom:0;
}

这篇关于如何使页眉和标题和左侧栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！