Выравнивание контента по вертикали

Alexsays · April 11, 2010

Вопрос: У меня на странице расположен блок в которым меняется высота в зависимости от содержимого, под этим блоком расположена таблица как сделать так чтобы эта таблица выравнивалась по вертикали, по центру между низом блока и нижней частью окна браузера, margin-top почему то не помогает, отступ берется от самого верхнего края окна браузера. Может я что то не понимаю? Если необходимо могу выложить код и картинку. Надеюсь на понимание и заранее благодарю!

Edited April 12, 2010 by Alexsays

stars · April 11, 2010

нарисуй пример...

rus · April 12, 2010

а зачем отступ от самого верхнего края окна браузера?

делайте отступ от этого дива:

У меня на странице расположен блок в которым меняется высота в зависимости от содержимого

Alexsays · April 12, 2010

В общем сверху 2 блока наложенных друг на друга, снизу таблица. Блок изменяется по высоте в зависимости от содержимого надо сделать так что бы таблица занимала оставшиеся место по середине между блоками, увеличивалась на больших мониторах и уменьшалась на маленьких но при сильном уменьшении не налазила на блоки или под них, короче была резиновой. Вот код:

<html>
<style>
.rtop, .rbottom{
display:block
border: 1px solid black;
}
.rtop *, .rbottom *{
display: block; 
height: 1px; 
overflow: hidden;
background:red;
}
.r1{
margin: 0 5px
}
.r2{
margin: 0 3px
}
.r3{
margin: 0 2px
}
.r4{
margin: 0 1px; height: 2px}
.Atop, .Abottom{
display:block
border: 1px solid black;
}
.Atop *, .Abottom *{
display: block; 
height: 1px; 
overflow: hidden;
background:#FFFF00;
}
.d {
	position:absolute;
	top: 81px;
	left: 30px;
	right: 30px;
}
#apDiv1 {
	position:absolute;
	left:40px;
	top:82px;
	z-index:1;
	right: 40px;
}
.table1 {
	margin-top: 150px;
	background-color: #00CCFF;
}
</style>

<div class="d">
<b class="rtop">
<b class="r1"></b> 
<b class="r2"></b> 
<b class="r3"></b> 
<b class="r4"></b></b>
<div style='background:red;'>
  <table width="762" height="196" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
  </table>
</div>

<b class="rbottom">
<b class="r4"></b> 
<b class="r3"></b> 
<b class="r2"></b> 
<b class="r1"></b>
</b>

</div>

<div id="apDiv1">
<div>
<b class="Atop">
<b class="r1"></b> 
<b class="r2"></b> 
<b class="r3"></b> 
<b class="r4"></b></b>
<div style='background:#FFFF00;'>
  <table width="724" height="194" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
  </table>
</div>

<b class="Abottom">
<b class="r4"></b> 
<b class="r3"></b> 
<b class="r2"></b> 
<b class="r1"></b>
</b></div></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0" class="table1">
  <tr>
    <td width="8"> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
</table>
<p> </p>
</html>

rus · April 12, 2010

ну вроде как все работает..., что не нравится?

к стати, а кто будет стиль класть в хедер? а кто будет ставить тег боди?

Alexsays · April 12, 2010

С кодом есть недочеты но это не основной код, это наброски, В основном css в отдельном файле. Не устраивает то что таблица на постоянной высоте от верхнего края окна и не как не привязана к размеру блоков следовательно при большом увеличение блоков, они будут налазить на таблицу. Если смотреть эту страницу на широкоформатном мониторе (15.6 дюймов ) то она занимает почти все оставшееся место под блоками а если смотреть на квадратном (23 дюйма)то таблица весит и сверху до блока и снизу до края окна остается много свободного места. А мне надо что бы таблица растягивалась и занимала предположим 80% свободного места снизу между блоками и краем окна и выравнивалась по середине то есть одинаково отображалась на дисплеях с разными разрешениями.

Edited April 12, 2010 by Alexsays

Alexsays · April 14, 2010

Ну товарищи подскажите пожалуйста а то дело на месте стоит!

Justnewone · April 14, 2010

Ну товарищи подскажите пожалуйста а то дело на месте стоит!

Это мусолица уже скока времени. Всю конструкцию в див, жел-но с шириной, потом внешнему диву из спарки и таблице дать 100% ширины.

Скучные примеры, в общем, давайте уже на след. этап.

Alexsays · April 18, 2010

Спасибо за ответ, но что то ничего не выходит или я не так вас понял нельзя ли поподробнее объяснить?

psywalker · April 19, 2010

Что-то похожее можно сотворить, сделав одну таблицы, в две строки, растянутую на высоту 100%, в верхнюю строку помести свой блок, а нижняя часть пусть дальше тянется до низа.

PoshtarBoba · April 21, 2010

1. У меня на странице расположен блок в которым меняется высота в зависимости от содержимого.
2. Под этим блоком расположена таблица.
Сделать: чтоб таблица выравнивалась по вертикали, по центру между низом блока и нижней частью окна браузера

Скриптом высчитать высоту страницы, высоту дива, вертикальные отступы (в т.ч. паддинги), высоту таблицы, высчитать свободное расстояние и задать нижний маргин блоку в размере половины разницы высоты свободного места и таблицы по модулю + 16px (тогда если места будет меньше нужного - между блоком и таблицей останется 16px пространства, а таблица уйдёт вниз за границу окна и появится полоса прокрутки). Простенький пример "размещения посередине по вертикали" тут: http://forum.htmlbook.ru/index.php?showtop...st&p=146956

А мне надо что бы таблица растягивалась и занимала предположим 80% свободного места снизу

Вот тут я не понял. В обычных условиях таблица растягивается только в горизонтальном направлении, зачем её растягивать по вертикали? (да и не уверен - может ли она так просто себе растягиваться вниз).

Edited April 21, 2010 by PoshtarBoba

Sign In

Выравнивание контента по вертикали

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information