VPF::Сайдбар на весь экран - Форум программистов

MoLeX

Дата 7.9.2010, 10:43 (ссылка)

(нет голосов)

Загрузка ...

Местный пингвин

Профиль
Группа: Модератор
Сообщений: 4076
Регистрация: 17.5.2007

Репутация: нет
Всего: 140

Добрый день.
Как сделать, чтобы блок Sidebar был на весь экран?

index.html

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
<body>

<div id="wrapper">
    <div id="header">Header</div>


    <div id="middle">
        <div id="container">
            <div id="content">Content</div>
        </div>

        <div class="sidebar" id="sideLeft">Sidebar</div>
    </div>
</div>


<div id="footer">Footer</div>
</body>
</html>

style.css

Код


* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
    width: 100%;
    height: 100%;
}
a {
    color: blue;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
p {
    margin: 0 0 18px
}
img {
    border: none;
}
input {
    vertical-align: middle;
}
#wrapper {
    width: 1024px;
    margin: 0 auto;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}


/* Header
-----------------------------------------------------------------------------*/
#header {
    height: 150px;
    background: #FFE680;
}


/* Middle
-----------------------------------------------------------------------------*/
#middle {
    width: 100%;
    padding: 0 0 100px;
    height: 1%;
}
#middle:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
#container {
    width: 100%;
    float: left;
    overflow: hidden;
}
#content {
    padding: 0 0 0 270px;
}


/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
    float: left;
    width: 250px;
    margin-left: -100%;
    position: relative;
    background: #B5E3FF;
}


/* Footer
-----------------------------------------------------------------------------*/
#footer {
    width: 1024px;
    margin: -100px auto 0;
    height: 100px;
    background: #BFF08E;
}

--------------------

Amazing

CruorVult

Дата 7.9.2010, 10:53 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 1
Всего: 28

Цитата(MoLeX @ 7.9.2010, 10:43

)

Как сделать, чтобы блок Sidebar был на весь экран?

Тоесть на весь экран? По высоте и ширине?

MoLeX

Дата 7.9.2010, 11:10 (ссылка)

(нет голосов)

Загрузка ...

Местный пингвин

Профиль
Группа: Модератор
Сообщений: 4076
Регистрация: 17.5.2007

Репутация: нет
Всего: 140

CruorVult, сорри, не уточнил. по высоте.

--------------------

Amazing

CruorVult

Дата 7.9.2010, 11:12 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 1
Всего: 28

с помощью js можно так:

Код


document.getElementById('sideLeft').style.height = document.body.offsetHeight+"px";

MoLeX

Дата 7.9.2010, 11:12 (ссылка)

(нет голосов)

Загрузка ...

Местный пингвин

Профиль
Группа: Модератор
Сообщений: 4076
Регистрация: 17.5.2007

Репутация: нет
Всего: 140

вот так вот должно быть http://habreffect.ru/files/d43/b46ef2d5e/%...%BD%D0%B8-5.jpg

Добавлено через 13 минут и 36 секунд
а без JS не как?

--------------------

Amazing

ksnk

Дата 7.9.2010, 16:22 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

вот так, например.
Там видно , что левый столбик рисуется бякграундом от body, а правый - бякграундом от элемента main, растянутого на 100% по высоте. Верх и низ - элементы, которые накладываются поверх уже нарисованных полосок. а вот DOM элементов, которые представляют собой полностью столбик правильной высоты, расположенный слева - такой дивной верстки я не встречал. только табличную... или на JS smile

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

supervladislav

Дата 7.9.2010, 19:24 (ссылка)

(голосов:2)

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9

Скажите ,а есть ли в природе книга в бумажном или электронном виде ,которая была бы посвящена только вёрстке на дивах????

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »