Растянуть div на всю ячейку

@taras atavin · Регистрация: 24.11.2009

Author24 — интернет-сервис помощи студентам

Есть таблица, а в её ячейках divы. Предположим,

HTML5

<table border=1>
<td width=90%>
<tr>
<div></div>
</td>
<td>
<table borede=1>
<tr height=40%>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
</td>
</tr>
</table>

. Каждый div на растянуть на всю ширину и высоту его ячейки. Как это сделать?

@LeD4eG · 04.03.2011, 09:30

присвоить им (дивам) высоту и ширину в 100% не пробовали?

@taras atavin · 04.03.2011, 09:33 **[ТС]**

А это не только для таблиц работает и так:

HTML5

<table border=1>
<td width=90%>
<tr>
<div width=100% height=100%></div>
</td>
<td>
<table borede=1>
<tr height=40%>
<td>
<div width=100% height=100%></div>
</td>
<td>
<div width=100% height=100%></div>
</td>
</td>
</tr>
</table>

тоже можно?

@LeD4eG · 04.03.2011, 09:50

taras atavin, нет, так нельзя

во внешней таблице стилей:

CSS

 tr div, td div {
    width: 100%;
    height: 100%;
}

есть, конечно ещё варианты на уровне документы стили разместить и на уровне элемента. но лучше так не делать.

@taras atavin · 04.03.2011, 09:51 **[ТС]**

Сообщение от LeD4eG

во внешней таблице стилей:

То есть где?

@LeD4eG · 04.03.2011, 09:56

taras atavin, то есть создаёте текстовый файл. присваиваете ему имя, например style.css
там прописываете все стили для Вашего сайта.

затем в коде страницы в теге <head> задаёте тег связи следующим образом:

HTML5

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

в атрибуте href указываете путь к файлу таблицы стилей.если таблица стилей находится с главной страницей рядом, то можно просто название указать.

@taras atavin · 09.03.2011, 06:05 **[ТС]**

Сообщение от LeD4eG

taras atavin, то есть создаёте текстовый файл. присваиваете ему имя, например style.css
там прописываете все стили для Вашего сайта.

затем в коде страницы в теге <head> задаёте тег связи следующим образом:

HTML5

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

в атрибуте href указываете путь к файлу таблицы стилей.если таблица стилей находится с главной страницей рядом, то можно просто название указать.

Спасибо, получилось. А как теперь измерить высоту и ширину получившихся divов?

@LeD4eG · 09.03.2011, 09:00

taras atavin, это надо исходить из размеров, которые Вы задали для всей таблицы.
например, если Вы задали ширину таблицы 600px и у этой таблицы 3 ячейки, то на каждую ячейку будет около 200px (около, потому что надо учитывать рамки, расстояние между ячейками и т.д.). если 200px для ячейки, то див в ней будет занимать всё возможное пространство.
а вот с высотой несколько посложнее. если Вы не указывали высоту для всей таблицы (родительского элемента (элемент table) для Ваших div в разделах), то 100% заменяется автоматически на auto. то есть высота будет автоматически меняться. а, если Вы задали высоту для тэга Table, то вычисления подобны вычислениям ширины.

@taras atavin · 10.03.2011, 06:52 **[ТС]**

Около меня не устраивает. Я хочу до пикселя. И размеры самой таблицы тоже надо автоматически настраивать по окну, для чего надо измерять ещё один div и ещё body.

@LeD4eG · 10.03.2011, 12:46

taras atavin, ну так и расчитывайте до пикселя.
допустим, общая ширина таблицы 600 px.
рамка вокруг ячейки - 1px.
расстояние между ячейками - 2px.
ячейки всего три.
итого: 2+2+1+1=6
на ячейки отводится 594px. 594/3 = 198px - ширина ячейки.

@4ui · 11.03.2011, 18:35

ледчег падскажи как сделать так чтобы дивы располошались друг от друга во все стороны на одно и тоже расстояние?т.е вправо и вниз ставились в таблице(td) относительно друг друга?

@Beowolf · 10.04.2011, 12:53

Скажите, почему такой вариант может не работать? Firebug пишет что Div присвоено height:100%, но при этом он остается по размеру содержимого.

Vovan-VE · 10.04.2011, 14:12

Сообщение от Beowolf

Скажите, почему такой вариант может не работать? Firebug пишет что Div присвоено height:100%

Высота в процентах работает только в следующих случаях:

Высота родителя задана в единицих длины (px, em, ...).
Родитель абсолютно спозиционирован, благодаря чему его высота четко известна.

В отсмальных случаях высота в % просто не используется.

@Beowolf · 10.04.2011, 15:17

а как быть если высота переменная, а мне надо растянуть содержимое на всю ячейку?

@LeD4eG · 10.04.2011, 22:27

Beowolf, ну так вот для этого нужны проценты. то есть автоматически содержимое занимает 100% высоты ячейки...
4ui, с помощью атрибута cellspacing для тэга table...ну или с помощью margin...

Vovan-VE 13208 / 6596 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	10.04.2011, 14:12	13
	Сообщение от Beowolf Скажите, почему такой вариант может не работать? Firebug пишет что Div присвоено height:100% Высота в процентах работает только в следующих случаях: Высота родителя задана в единицих длины (px, em, ...). Родитель абсолютно спозиционирован, благодаря чему его высота четко известна. В отсмальных случаях высота в % просто не используется. 0

@LeD4eG 14 / 14 / 0 Регистрация: 29.09.2009 Сообщений: 79
	04.03.2011, 09:30	2
	присвоить им (дивам) высоту и ширину в 100% не пробовали? 0

@taras atavin 4226 / 1795 / 211 Регистрация: 24.11.2009 Сообщений: 27,562
	04.03.2011, 09:51 [ТС]	5
	Сообщение от LeD4eG во внешней таблице стилей: То есть где? 0

@LeD4eG 14 / 14 / 0 Регистрация: 29.09.2009 Сообщений: 79
	09.03.2011, 09:00	8
	taras atavin, это надо исходить из размеров, которые Вы задали для всей таблицы. например, если Вы задали ширину таблицы 600px и у этой таблицы 3 ячейки, то на каждую ячейку будет около 200px (около, потому что надо учитывать рамки, расстояние между ячейками и т.д.). если 200px для ячейки, то див в ней будет занимать всё возможное пространство. а вот с высотой несколько посложнее. если Вы не указывали высоту для всей таблицы (родительского элемента (элемент table) для Ваших div в разделах), то 100% заменяется автоматически на auto. то есть высота будет автоматически меняться. а, если Вы задали высоту для тэга Table, то вычисления подобны вычислениям ширины. 0

@taras atavin 4226 / 1795 / 211 Регистрация: 24.11.2009 Сообщений: 27,562
	10.03.2011, 06:52 [ТС]	9
	Около меня не устраивает. Я хочу до пикселя. И размеры самой таблицы тоже надо автоматически настраивать по окну, для чего надо измерять ещё один div и ещё body. 0

@LeD4eG 14 / 14 / 0 Регистрация: 29.09.2009 Сообщений: 79
	10.03.2011, 12:46	10
	taras atavin, ну так и расчитывайте до пикселя. допустим, общая ширина таблицы 600 px. рамка вокруг ячейки - 1px. расстояние между ячейками - 2px. ячейки всего три. итого: 2+2+1+1=6 на ячейки отводится 594px. 594/3 = 198px - ширина ячейки. 0

@4ui 0 / 0 / 0 Регистрация: 04.03.2011 Сообщений: 3
	11.03.2011, 18:35	11
	ледчег падскажи как сделать так чтобы дивы располошались друг от друга во все стороны на одно и тоже расстояние?т.е вправо и вниз ставились в таблице(td) относительно друг друга? 0

@Beowolf 1 / 1 / 0 Регистрация: 27.08.2009 Сообщений: 33
	10.04.2011, 12:53	12
	Скажите, почему такой вариант может не работать? Firebug пишет что Div присвоено height:100%, но при этом он остается по размеру содержимого. 0

@Beowolf 1 / 1 / 0 Регистрация: 27.08.2009 Сообщений: 33
	10.04.2011, 15:17	14
	а как быть если высота переменная, а мне надо растянуть содержимое на всю ячейку? 0

@LeD4eG 14 / 14 / 0 Регистрация: 29.09.2009 Сообщений: 79
	10.04.2011, 22:27	15
	Beowolf, ну так вот для этого нужны проценты. то есть автоматически содержимое занимает 100% высоты ячейки... 4ui, с помощью атрибута cellspacing для тэга table...ну или с помощью margin... 0