IE6 “структурируют” расположение с 100% высотой и полосами прокрутки
Я хочу достигнуть простого расположения "кадра" с фиксированным заголовком, фиксированной оставленной областью навигации и областью основного содержания, которая заполняет 100% остатка от области просмотра с полосами прокрутки при необходимости. Моя лучшая попытка ниже - но когда я добавляю достаточно содержания к основному отделению для принуждения прокрутки, я вижу, что полоса прокрутки расширяется ниже нижней части области просмотра.
Что я делаю неправильно? Или что IE6 делает неправильно и как я могу зафиксировать его?
NB не рекомендуйте использовать более свежий браузер - я хотел бы, но не может.
Обновите 1 (для Matti и других пуристов!) - я должен жить в рамках реальных ограничений разработки веб-приложения для главного офиса группы, к которой должны получить доступ пользователи в более чем 100 филиалах, не, все из которых обновили до современного браузера. И некоторые филиалы хотели бы использовать несовместимость браузера в качестве оправдания не использовать приложение, наложенное главным офисом!
Обновление 2
Я - разработчик приложений, не веб-дизайнер, как, вероятно, очевидно. До настоящего времени я использовал HTML 4.0 DOCTYPE, Переходный, который я верю режиму причуд сил во всей версии IE. Однако я недавно попытался добавить AjaxControlToolkit ModalPopupExtender, и это портит мое расположение, когда всплывающее окно отображено. Google предложил, чтобы я использовал XHTML 1.0 для фиксации этого (AjaxControlToolkit не поддерживает режим причуд), и на самом деле я довольно рад переместиться в более чистое основанное на CSS расположение, но мне действительно нужно мое основное расположение кадра для работы в IE6.
<!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>
<title></title>
<style type="text/css">
html, body
{
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
div
{
border:0;
margin:0;
padding:0;
}
div#top
{
background-color:#dddddd;
height:100px;
}
div#left
{
background-color:#dddddd;
float:left;
width:120px;
height:100%;
overflow:hidden;
}
div#main
{
height:100%;
overflow:auto;
}
</style>
</head>
<body>
<div id="top">Title</div>
<div id="left">LeftNav</div>
<div id="main">
Content
<p>
Lorem ipsum ...
</p>
... repeated several times to force vertical scroll...
<table><tr>
<td>ColumnContent</td>
... td repeated several times to force horizontal scroll...
<td>ColumnContent</td>
</tr></table>
</div>
</body>
</html>
3 ответа
В моем предыдущем ответе я был абсолютно неправ (без каламбура), поскольку вы не можете указать оба top и bottom в IE6, ни оба left и справа . Более того, вы не знаете точную ширину и высоту блока содержимого, а также не знаете их в процентах от области просмотра.
Когда я решил эту проблему, я перевел IE в режим причуд, чтобы получить модель рамки рамки (см. Также спецификацию W3C ). Чтобы использовать те же правила CSS для браузера, который больше соответствует стандартам, вы можете использовать свойство box-sizing (и варианты). После этого границы попадают внутрь содержимого, и вы можете сдвинуть его вниз и вправо, указав границу (ширина и стиль):
<!-- put IE in quirks mode -->
<!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>
<title>IE6 'frames'</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-khtml-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html, body {
height: 100%;
overflow: hidden;
}
#top {
position: absolute;
top: 0;
width: 100%;
background-color: #ddd;
height: 100px;
z-index: 2;
}
#left {
position: absolute;
left: 0;
border-top: 100px solid; /* move everything below #top */
background-color: #bbb;
width: 120px;
height: 100%;
overflow: hidden;
z-index: 1;
}
#main {
position: absolute;
border-top: 100px solid;
border-left: 120px solid;
width: 100%;
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div id="top">Title</div>
<div id="left">LeftNav</div>
<div id="main">
<p>
Lorem ipsum ...<br />
<!-- just copy above line many times -->
</p>
</div>
</body>
</html>
ОБНОВЛЕНИЕ: В IE> = 7 и другие браузеры, соответствующие стандартам, вы можете использовать position: fixed вместе с правилами top и bottom (и др.). Есть способ получить этот фреймовый вид в IE6 в стандартном режиме (или, скорее, почти стандартном режиме ) с использованием выражений CSS . Таким образом, вы можете позволить механизму JScript вычислять правильные значения ширины и высоты (добавляются между условными комментариями).
<!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>
<title>'Frames' using <div>s</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
#top, #left, #main {
position: fixed;
overflow: hidden;
}
#top {
top: 0;
width: 100%;
background-color: #ddd;
height: 100px;
}
#left {
left: 0;
top: 100px; /* move everything below #top */
bottom: 0;
background-color: #bbb;
width: 120px;
}
#main {
top: 100px;
left: 120px;
bottom: 0;
right: 0;
overflow: auto;
}
</style>
<!--[if IE 6]>
<style>
#top, #left, #main {
position: absolute;
}
#left {
height: expression((m=document.documentElement.clientHeight-100)+'px');
}
#main {
height: expression((m=document.documentElement.clientHeight-100)+'px');
width: expression((m=document.documentElement.clientWidth-120)+'px');
}
</style>
<![endif]-->
</head>
<body>
<div id="top">Title<br /></div>
<div id="left">LeftNav<br /></div>
<div id="main">
<p>
Lorem ipsum ...<br />
<!-- just copy above line many times -->
</p>
</div>
</body>
</html>
Тем не менее, я не рекомендую этот метод. Это заметно замедлит просмотр и без того не слишком быстрого IE6, поскольку эти выражения вычисляются много раз .
Еще одно примечание: я полагаю, вы будете использовать внешние таблицы стилей (и сценарии) в конце, но если вы хотите встроить их в документ XHTML, используйте «маркеры и комментарии CDATA, соответствующие сценарию или языку стилей. используется », как рекомендует Дэвид Дорвард .
Этот html должен вам немного помочь, но вам, вероятно, придется повозиться с ним, чтобы заставить его работать идеально в ie6 (извините, я не могу протестировать в ie6 прямо сейчас). Проблема возникает из-за того, что на самом деле есть полоса прокрутки, появляющаяся в html и теле, где вы указали overflow: hidden. Вы можете снять это и установить автоматическое переполнение, чтобы увидеть, как это происходит.
<!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>
<style type="text/css">
html
{
height:100%;
}
body
{
height:100%;
margin:0px;
padding:0px;
border-left:0px;
border-right:0px;
overflow:hidden;
}
#header
{
top:0px;
width:100%;
height:100px;
background-color:#dddddd;
position:absolute;
}
#content
{
top:100px;
bottom:0px;
width:100%;
overflow:auto;
position:absolute;
}
#wrapper
{
padding-left:125px;
}
div#left
{
background-color:#dddddd;
float:left;
width:120px;
height:100%;
overflow:hidden;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="left"></div>
<div id="content">
<div id="wrapper">
<p>content</p>
<p>content</p>
</div>
</div>
</body>
</html>