Подтвердить что ты не робот

Как сделать страницу с заголовком и левой панелью?

Я бы хотел сделать такую ​​веб-страницу:

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

Заголовок имеет фиксированную высоту, но ширина должна быть динамической. Левая панель должна иметь фиксированную ширину, но динамическую высоту. Для области содержимого высота и ширина динамические. Когда пользователь масштабирует свой браузер, панель прокрутки не должна отображаться (не задано переполнение: скрыто, чтобы скрыть ее.).

Я попытался написать такой код:

<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%;
 }

Но это не удалось.

РЕДАКТИРОВАТЬ: область содержимого и левая сторона должны заполнить все окно браузера..... Мне не нужно

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

ОТВЕТЫ

Ответ 1

пример в 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;
}

Ответ 2

Вот простой код для вас. Попробуйте это и узнайте качество CSS.

HTML:

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

CSS

.clear{
clear:both;
} 
.main{
width:500px;
}
.top {
background: blue;
width:500px;
height: 92px;
}
.left {
float:left;
width: 150px;
background: red;
}
.right{
float:right;
width:350px;
background: yellow;
}

Ответ 4

Вам просто нужно удалить "float: left;" из определения .main.

Кроме того, при отладке позиционирования это действительно помогает:

div {
    border: 1px solid #000;
}

Также может потребоваться сбросить height: 100% из .left и .main, чтобы предотвратить вертикальную полосу прокрутки

Ответ 5

Демо: http://jsfiddle.net/nRQeA/

.top {
    width: 100%;
    height: 92px;

}
.left {
    width: 20%;
    height: 100%;
    float:left;
}
.main {
    float: left;
    height: 100%;
    width: 80%

 }

Ответ 6

Вы также можете использовать display: table и display: table-cell для создания страницы, содержащей элемент таблицы уровня с двумя табличными ячейками (боковая панель и область содержимого)

Образец изображения

<div id="outer-container">
    <div id="sidebar"></div>
    <div id="content"></div>
</div>

#outer-container {
    display: table;
    width: 100%;
    height: 100%;
}

#sidebar {
    display: table-cell;
    width: 15%;
    vertical-align: top;
}

#content {
    display: table-cell;
    width: 85%;
    vertical-align: top;
}

Учебник с демонстрацией здесь: http://usefulangle.com/post/61/html-page-with-left-sidebar-main-content-with-css