Форум Сайтостроение Веб-строительство

Резиновая верстка DIVами

12 3
kruto
На сайте с 26.10.2007
Offline
12
kruto
2506

Доброго времени суток.

Никак не могу справится с такой задачей:

1. Шапка фиксированной высоты, 100% ширины,

2. Ниже 2 колонки, левая фиксированной ширины, правая растягивается на оставшеся место, обе колонки ОДИНАКОВОЙ высоты и растягиваются до низа даже если мало контента.

3. Ниже подвал фиксированной высоты, 100% ширины.

Вроде бы достаточно распространенный шаблон, но не смог найти хорошего решения, чтобы Во-первых колонки имели всегда одинаковую высоту и Во-вторых растягивались до низа если мало контента. Проверял в IE. Пробовал для колонок также height:100%; но эффекта ноль.

Вот что у меня получилось. 

<html>

<head>

<META http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">

<!--

html,body{

  	margin:0;

	padding:0;

	background:url(files/fon/bg1px.gif);

	background-repeat:repeat-y;

	}

div.head{

	background-color: #ff000f;

	height: 205px;

	}

div.niz{

	height: 32px;

	clear:both;

	background-color: #ff000f;

	}

div.levo {

float:left;

width: 314px;

background-color: #f000ff;

	}

div.pravo{

	margin-left:314px;

	background-color:#e6e6e6;

}

div.ram-verh{

	background:url(../fon/ram_verh.gif);

	background-repeat:no-repeat;

	height:4px;

	font-size: 0px;

}

-->

</style>

</head>

<body>

<div class="head">Шапка</div>

<div class="levo">Новости </div>

<div class="pravo">Основная частьv<br>111</div>

<div class="niz">Подвал</div>

</body>

</html>

Вроде ситуация достаточно стандартная, наверняка есть хорошее решение. Подскажите пожалуйста.

Здесь могла быть моя подпись.
O
На сайте с 11.05.2005
Offline
172
Opeth
#1

kruto, ну ты махнул. Задачка как раз нетипичная. Побольшому счету есть два варианта сделать столбцы одинаковой высоты - с фоновым изображением и без. Ссылочки на туторы (инглиш):

http://www.positioniseverything.net/articles/onetruelayout/equalheight

http://www.alistapart.com/articles/fauxcolumns/

Ткач
На сайте с 29.04.2007
Offline
95
Ткач
#2

задачка довольно простая, я все сайты свои так и верстаю.

стукнитесь в аську 576890, помогу.

И не смешивайте html и body, особенно если стоит бэкграунд, к тому же ещё два стиля упущенны в коде.

Opeth,кстати туториалы не очень хороши в плане использования, есть решения проще

Разработка и создание сайтов. Красиво, функционально, недорого. (http://time-online.ru/) ICQ 388-474-890)
eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
kruto
На сайте с 26.10.2007
Offline
12
kruto
#3

Opeth, спасибо за ссылки, изучаю.

Ткач, обязательно стукну в аську.

Ткач
На сайте с 29.04.2007
Offline
95
Ткач
#4
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
<!--
html {heght: 100%; min-height: 100%;}
body{
height: 100%;
margin:0;
padding:0;
background:url(files/fon/bg1px.gif) right;
background-repeat:repeat-y;
}
div.main {min-height: 100%; margin-bottom: -32px; background:url(files/fon/bg2px.gif) left repeat-y;}
*html div.main {height: 100%;}
div.head{
background-color: #ff000f;
height: 205px;
}
div.pere {clear: both;}
div.preniz {height: 32px;}
div.niz{
height: 32px;
clear:both;
background-color: #ff000f;
}
div.levo {
float:left;
width: 314px;
background-color: #f000ff;
}
div.pravo{
margin-left:314px;
background-color:#e6e6e6;
}
div.ram-verh{
background:url(../fon/ram_verh.gif);
background-repeat:no-repeat;
height:4px;
font-size: 0px;
}
-->
</style>
</head>
<body>
<div class="main">
<div class="head">Шапка</div>
<div class="levo">Новости </div>
<div class="pravo">Основная частьv<br>111</div>
<div class="pere"></div>
<div class="preniz"></div>
</div>
<div class="niz">Подвал</div>
</body>
</html>

то что жирным то добавлено

Ткач
На сайте с 29.04.2007
Offline
95
Ткач
#5

да, забыл, если где то нужны уточнения какие то либо объяснение, или исправление возможных глюков в разных браузерах, могу помочь по ходу, поскольку на данный момент я писал код впустую, не видя этих самых бэкграундов и т.д.

Гудбай, "вебмастера"! DesignerGPT пришел Упал доход Как увеличить ИКС?
[Удален]
#6

Ткач, зачем так сложно? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<META http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">

<!--

* {margin:0;padding:0;}

html {height:100%;}

body {position:relative;height:auto !important;height:100%;min-height:100%;}

.head{background-color:#ff000f;height:205px;}

.niz {position:absolute;bottom:0;width:100%;height:32px;background-color:#ff000f;}

.levo {float:left;width:314px;background-color: #f000ff;}

.pravo{margin-left:314px;background-color:#e6e6e6;}

.peg {position:relative;height:auto !important;height:100%;min-height:100%;padding-bottom: 32px;}

-->

</style>

</head>

<body>

  <div class="head">

    шапка

  </div>

  <div class="peg">

    <div class="levo">

      новости <br>

    </div>

    <div class="pravo">

      Основная часть<br>111

    </div>

  </div>

  <div class="niz">

   подвал

  </div>

</body>

</html>
BrokenBrake
На сайте с 03.03.2007
Offline
194
BrokenBrake
#7

burunduk, гыгы, невалидненько будет ;)

Ткач
На сайте с 29.04.2007
Offline
95
Ткач
#8

burunduk,

.niz {position:absolute;bottom:0;width:100%;height:32px;background-color:#ff000f;}

А вы уверены что в мозилле и опере не поедет вверх при прокрутке вертикальной?

я поэтому специально сделал два контейнера, один общий на 100% по вертикали минус высота подвала, а второй подвал собственно, который будет прижиматся первым блоком.

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
[Удален]
#9

BrokenBrake, так для валидности вынеси стили в отдельный файл и добавь title 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Mozilla</title>

<META http-equiv="Content-Type" content="text/html; charset=windows-1251">

<link rel="stylesheet" type="text/css" href="1024.css">

</head>

<body>

  <div class="verh">

    шапка

  </div>

  <div class="peg">

    <div class="levo">

      &#205;&#238;&#226;&#238;&#241;&#242;&#232; <br>

    </div>

    <div class="pravo">

      Основная частьv<br>111

    </div>

  </div>

  <div class="niz">

    подвал

  </div>

</body>

</html>

и фалл 1024.css 

* {margin:0;padding:0;}

html {height:100%;}

body {position:relative;height:auto !important;height:100%;min-height:100%;}

.verh{background-color:#ff000f;height:205px;}

.niz {position:absolute;bottom:0;width:100%;height:32px;background-color:#ff000f;}

.levo {float:left;width:314px;background-color: #f000ff;}

.pravo{margin-left:314px;background-color:#e6e6e6;}

.peg {position:relative;height:auto !important;height:100%;min-height:100%;padding-bottom: 32px;}

BrokenBrake пришлите 10$ за валидный код 😂😂😂

BrokenBrake
На сайте с 03.03.2007
Offline
194
BrokenBrake
#10

burunduk, не, br надо было закрыть. Ну это то что в глаза бросилось.

12 3

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий