1 Востаннє редагувалося Ярослав (19.03.2013 16:14:58)

Тема: Як розтягнути висоту блока на 100%?

Маю наступний код:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style>
.container {
    width: 400px;
    height: 400px;
    background-color: #ccc;
    border: solid #000;
    overflow: hidden;
}
#leftcol {
    float: left;
    width: 100px;
}
#rightcol {
    float: left;
    background: #f00;
    width: 300px;
    height: auto;
}
</style>
</head>
<body>
<div class="container">123
<div id="leftcol">left</div>
<div id="rightcol">right</div>
</div>
</body>
</html>

Завдання полягає в тому, щоб розтягнути колонку на 100% в висоту, бажано засобами css.

2 Востаннє редагувалося Пам'ять не може бути READ (19.03.2013 17:07:38)

Re: Як розтягнути висоту блока на 100%?

А таке:

height: 100%;

3

Re: Як розтягнути висоту блока на 100%?

Уже пробував.

Re: Як розтягнути висоту блока на 100%?

А яку саме колонку треба розтягнути ?
Сам контейнер, чи якусь з 2 колонок ?

5

Re: Як розтягнути висоту блока на 100%?

Одну з двох, можна обидві, та і контейнер теж.

6

Re: Як розтягнути висоту блока на 100%?

Може й криво, але...

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style>
html
{
    height: 100%;
}
body
{
    height: inherit;
}
.container {
    width: 400px;
    height: inherit;
    background-color: #ccc;
    border: solid #000;
    overflow: hidden;
}
#leftcol {
    float: left;
    width: 100px;
}
#rightcol {
    float: left;
    background: #f00;
    width: 300px;
    height: inherit;
}
</style>
</head>
<body>
<div class="container">123
<div id="leftcol">left</div>
<div id="rightcol">right</div>
</div>
</body>
</html>

Re: Як розтягнути висоту блока на 100%?

Може й криво, але...

Друге правило програміста:
"Головне, щоб працювало" :D

8

Re: Як розтягнути висоту блока на 100%?

А яке 1-ше?

Re: Як розтягнути висоту блока на 100%?

Invader написав:

А яке 1-ше?

"Працює - не чіпай!"

10

Re: Як розтягнути висоту блока на 100%?

Hanter написав:
Invader написав:

А яке 1-ше?

"Працює - не чіпай!"

А є ще й нульове...

11

Re: Як розтягнути висоту блока на 100%?

Ось тут є інфа http://ryanfait.com/sticky-footer/
А взагалі для яких цілей 100% висота блоку?

12 Востаннє редагувалося Ярослав (20.03.2013 09:40:15)

Re: Як розтягнути висоту блока на 100%?

http://keithfay.zz.mu/ розтягнути навігаційний блок на всю висоту діва класу контейнер. Тут привів спрощений код того, що там на сторінці.
Взагалі хотілося б зробити fixed, проте хочу освоїти ці властивості поступово.

Bartash, нажаль ваш варіант не підходить.

13

Re: Як розтягнути висоту блока на 100%?

В цілому, я зупинився на абсолютному позиціюванні.

14

Re: Як розтягнути висоту блока на 100%?

keithfay написав:

http://keithfay.zz.mu/ розтягнути навігаційний блок на всю висоту діва класу контейнер. Тут привів спрощений код того, що там на сторінці.
Взагалі хотілося б зробити fixed, проте хочу освоїти ці властивості поступово.

Bartash, нажаль ваш варіант не підходить.

Можливо, треба пошаманити з розміщенням віджетів відносно один одного, бо від цього реалізація залежить напряму.

15 Востаннє редагувалося Ярослав (20.03.2013 22:06:11)

Re: Як розтягнути висоту блока на 100%?

Ваш код працює, але при наявності іще елементів в тому ж контейнері нижче блок буде перекривати їх. Тому доцільне повідомлення від Replace, дійсно, причеплений до нижнього краю вікна браузера footer це вихід.