На липком нижнем колонтитуле, Как заставить границы div распространяться до конца страницы до нижнего колонтитула? - PullRequest
1 голос
/ 20 августа 2010

Я перепробовал все примеры CCS для нижнего колонтитула.Все они работают нормально.Однако у меня есть проблема.Предположим, у меня есть это:

<div id="wrap">
  <div id="bodyleft">left</div>
  <div id="bodyright">right</div>
  <div id="footer">footer</div>
</div>

Итак, если у меня есть height 100% для #bodyleft, граница не будет расширяться до конца области просмотра до нижнего колонтитула.Он будет охватывать только одну строку контента.

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

Есть идеи?

Спасибо!

Мария

РЕДАКТИРОВАТЬ:

<body>
<div id="wrap">

<div id="bodyleft">on left</div>
<div id="bodyright">
    some text on right<br />
</div>

</div>


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

</body>
</html>



* { margin:0px; padding:0px; }

html, body {height: 100%;}

#wrap {min-height: 100%;}

#footer {
        position: fixed; 
        bottom: 0; 
        background-color: #f00; 
        height: 20px; 
        width: 100%; 
        margin-top:-20px; /* negative value of footer height */
} 


#bodyleft{
    width:222px;
    float:left;
    border:1px solid black;
    overflow:auto;
    padding-bottom:20px;
}

#bodyright{
    width:777px;
    float:right;
    border:1px solid black;
    overflow:auto;
    padding-bottom:20px;
}

Ответы [ 2 ]

0 голосов
/ 20 августа 2010

То, что вы пытаетесь достичь (нижняя граница левого div, попадающая в нижний колонтитул, будет довольно сложной, потому что вы не знаете размер экрана пользователя. Вы можете сделать это с таблицами, но это в значительной степени разрушит весь код разметки.

Разве вы не можете просто смоделировать нижнюю границу?

+----------------------------+------------------------+
|  LEFT DIV                  |       SAME FOR RIGHT   |                 
|                            |                        |
+----------------------------+                        |
| DIV with 1px height        |                        |
| and same width as left div |                        |
| to simulate boder          |                        |
+----------------------------+------------------------+
|  FOOTER                                             |
+-----------------------------------------------------+
0 голосов
/ 20 августа 2010

Я могу ошибаться, но я думаю, что 100% будет достаточно высоко, чтобы отобразить содержимое div.Я думаю, что вам, возможно, придется использовать min-height.

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