3-рядная разметка, расширение по середине, минимальная высота: 100%, поэтому нижний колонтитул находится внизу при минимальном содержании - PullRequest
Новая
       6

3-рядная разметка, расширение по середине, минимальная высота: 100%, поэтому нижний колонтитул находится внизу при минимальном содержании

3 голосов
/ 15 мая 2010

Как бы я изменил это, чтобы средний div расширялся вертикально, чтобы заполнить пробел? 

<!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></title>
<style type="text/css">

body,td,th {
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
}

#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:100%;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

#header {
    height: 150px;
    border-bottom: 2px solid #ff8800;
    position: relative;
    background-color: #c97c3e;
}

#middle {
    padding-right: 90px;
    padding-left: 90px;
    padding-top: 35px;
    padding-bottom: 43px;
    background-color: #0F9;
}
#footer {
    border-top: 2px solid #ff8800;
    background-color: #ffd376;
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
}
</style>
</head>

<body>

<div id="container">
    <div id="header">
        Header
    </div>
    <div id="middle">
        Middle
    </div>
    <div id="footer">
        Footer
    </div>
</div>

</body>
</html>

Ответы [ 4 ]

0 голосов
/ 07 июня 2010

Вы не можете заставить фактический div расширяться, чтобы заполнить пробел без Javascript, но вы можете легко заставить его это делать. Переместите ваше правило цвет фона: # 0F9; из #middle в #container. Это даст вам требуемое поведение (оно заполнит пробел при минимальном содержании, а при большом количестве содержимого развернется вниз, подтолкнув нижний колонтитул).

Если вы хотите решение Javascript, будет работать следующий код. Просто поместите это в ваш HTML заголовок: 

<script type="text/javascript">
window.onload = function() {
    var mid = document.getElementById('middle');
    var foot = document.getElementById('footer');
    mid.style.height = ((foot.offsetTop+foot.clientHeight)-(mid.offsetTop+mid.clientHeight))+'px';
};
</script>
0 голосов
/ 15 мая 2010 
#footer {
    clear: both;
}

Это должно быть уловкой. Нижний колонтитул должен всегда отображаться под столбцом с наибольшим содержанием.

Лично я всегда добавляю класс очистки CSS в свои шаблоны и использую их как разрывы 

.clear {clear:both;}

Тогда: 

<div id="container">
    <div id="header">
        Header
    </div>
    <div id="middle">
        Middle
    </div>

    <br class="clear" />

    <div id="footer">
        Footer
    </div>
</div>

Таблицы вызовут у вас больше проблем, чем решат.

0 голосов
/ 15 мая 2010

Я думаю, что то, что вы ищете, иногда называют липким нижним колонтитулом.

Эта страница объясняет, как это делается. Что бы вы сделали, это поместите свой заголовок и расширение содержимого в оболочку, которую он упоминает.

Надеюсь, это поможет вам получить макет.

0 голосов
/ 15 мая 2010

Это мой резервный ответ: 

<!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></title>
<style type="text/css">

body,td,th {
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
}

#container {
    height: 100%;
}

#container #header {
    height: 50px;
    background-color:#0F6;
}

#container #middle {
    background-color: #66F;
}

#container #footer {
    height: 20px;
    background-color: #FF3;
}

</style>
</head>

<body>

<!-- Apology note to perfectionists: I'm sorry for using tables, but see this:
    /868391/css-maket-bez-tablitsy-s-tremya-strokami-i-srednei-strokoi-zapolnyayschii-ostavsheesya-prostranstvo
    A layout done with this table would be impossible with CSS. -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="container">
  <tr id="header">
    <td>h</td>
  </tr>
  <tr id="middle">
    <td>m</td>
  </tr>
  <tr id="footer">
    <td>f</td>
  </tr>
</table>


</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...