Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Сайдбар на весь экран


Автор: MoLeX 7.9.2010, 10:43
Добрый день.
Как сделать, чтобы блок 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;
}

Автор: CruorVult 7.9.2010, 10:53
Цитата(MoLeX @  7.9.2010,  10:43 Найти цитируемый пост)
Как сделать, чтобы блок Sidebar был на весь экран?

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

Автор: MoLeX 7.9.2010, 11:10
CruorVult, сорри, не уточнил. по высоте.

Автор: CruorVult 7.9.2010, 11:12
с помощью js можно так:
Код

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

Автор: MoLeX 7.9.2010, 11:12
вот так вот должно быть http://habreffect.ru/files/d43/b46ef2d5e/%D0%91%D0%B5%D0%B7_%D0%B8%D0%BC%D0%B5%D0%BD%D0%B8-5.jpg

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

Автор: ksnk 7.9.2010, 16:22
http://e-petrov.ru/test/three-column/, например.
Там видно , что левый столбик рисуется бякграундом от body, а правый - бякграундом от элемента main, растянутого на 100% по высоте. Верх и низ - элементы, которые накладываются поверх уже нарисованных полосок. а вот DOM элементов, которые представляют собой полностью столбик правильной высоты, расположенный слева  - такой дивной верстки я не встречал. только табличную... или на JS  smile 

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)