резинновый макет с position:absolute ?

iillyyaa2 · May 27, 2011

с координатами сделать такое не проблема, если верхний блок имеет чёткие размеры, а если эти размеры не известны ?

возможно ли вообще ?

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

(красный маленький блок, зелёный, если его содержимое будет большим)

вот так смог если известен размер верхнего блока

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
body {margin:0;}
.tops {
	position:absolute;
	border:1px solid red;
	height:295px;
	width:100%;
	top:60px;
}
</style>


<div style="height:50px; border:1px solid;">верхний блок</div>
<table style="position:relativ; border:1px solid; height:100%;" width="100%">
	<tr>
		<td style="height:300px; border:2px solid blue;">ddd</td>
	</tr>
	<tr>
		<td>bbb</td>
	</tr>
</table>

<table class="tops" width="100%" height="100%">
	<tr>
		<td align="center" valign="middle">ddd</td>
	</tr>
</table>

Azadi · May 27, 2011

Высота нашего красного блока известна? Хотя в любом случае без капельки JS не обойтись. Чтобы центрировать данный блок, можно найти решение с position:fixed; и display:table-cell (если высота неизвестна). Ну и небольшой скрипт, который следит за размерами нашего блока. Если высота блока больше высоты окна просмотра браузера, то ставим нашему блоку position:absolute; Короче на чистом CSS данную задачу не решить.

iillyyaa2 · May 27, 2011

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

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

думал, может position:absolute; взятый из серого блока не пойдёт до верха, а нет, он топ берёт от края окна а не родителя

buddah · May 28, 2011

думал, может position:absolute; взятый из серого блока не пойдёт до верха, а нет, он топ берёт от края окна а не родителя

Задай серому relative, тогда он будет родителем для absolute блока в нем.

На счет задачи: только JS.

iillyyaa2 · May 28, 2011

Задай серому relative, тогда он будет родителем для absolute блока в нем.
На счет задачи: только JS.

пробовал, top: 0 всё равно идёт в верх окна... выше "серого" родителя

или что то не так ?

buddah · May 28, 2011

Задай серому relative, тогда он будет родителем для absolute блока в нем.
На счет задачи: только JS.
пробовал, top: 0 всё равно идёт в верх окна... выше "серого" родителя
или что то не так ?

Не может быть, пересмотри еще раз кто кому родителем является.

также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

iillyyaa2 · May 28, 2011

buddah, да да, я это тоже читал...

или я что то не так делаю...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<div style="position:relativ; border:1px solid; height:200px;"></div>
<div style="position:relativ; border:1px solid; height:200px;">
	<div style="position:absolute; top:0; border:1px solid red; height:100px; width:100px;"></div>
</div>

buddah · May 28, 2011

lol

не relativ, a relative

Как бывает чаще всего - глупые мелкие ошибки создают больше всего геморроя при верстке)

iillyyaa2 · May 28, 2011

твою мать, вот я безграмотный... сказывается отсутствие образования

а ведь пробовал сделать так и раньше, и тоже чё то не получалось... наверно так же накосячил

теперь то я и к резиновому прилеплю

может кому пригодится...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
body {margin:5;}
.tops {
	position:absolute;
	border:1px solid red;
	height:300px;
	width:100%;
	top:0;
	z-index: 99;
}
</style>


<div style="height:50px; border:1px solid;">верхний блок</div>
<div style="position:relative;">
	<table class="tops" width="100%" height="100%">
		<tr>
			<td align="center" valign="middle">вот оно решение то</td>
		</tr>
	</table>
</div>
<div style="position:relative; height:300px; border:2px solid blue;">Средний блок</div>
<div style="height:50px; border:1px solid;">нижний блок</div>

Edited May 28, 2011 by iillyyaa2

Sign In

резинновый макет с position:absolute ?

Question

iillyyaa2

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Azadi

Link to comment

Share on other sites

iillyyaa2

Link to comment

Share on other sites

buddah

Link to comment

Share on other sites

iillyyaa2

Link to comment

Share on other sites

buddah

Link to comment

Share on other sites

iillyyaa2

Link to comment

Share on other sites

buddah

Link to comment

Share on other sites

iillyyaa2

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information