Jump to content
  • 0

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


Alexsays
 Share

Question

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

Edited by Alexsays
Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

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

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

У меня на странице расположен блок в которым меняется высота в зависимости от содержимого
Link to comment
Share on other sites

  • 0

406138.jpg

В общем сверху 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>

Link to comment
Share on other sites

  • 0

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

Edited by Alexsays
Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

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

2. Под этим блоком расположена таблица.

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

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

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

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

Edited by PoshtarBoba
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy