Я перепробовал все примеры 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;
}