UseRifle
@UseRifle

Странное поведение overflow в Chrome

Здравствуйте!

Столкнулся с таким вот странным поведением в хроме… Даже не знаю, в какую сторону копать, чтобы заработало.

Имеем простую страничку

<!DOCTYPE html>
<html>
<head>
<style>
html, body, div {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}
html, body {
height:100%;
}
#left {
height:100%;
width:20%;
background:lightgreen;
float:left;
}
#content {
height:100%;
margin-left:20%;
background:lightblue;
overflow: auto;
}

</style>
</head>
<body>
<div id="left"></div>
<div id="content"></div>
</body>
</html>


В хроме при включенном overflow: auto; правый блок отступает от левого края не на 20%, а на непонятную величину… в остальных браузерах все, как и задумывалось. Если overflow отключить, то в хроме все нормально при пустом правом блоке, но мне нужна прокрутка именно в блоке, а не всей страницы, если содержимого будет много.

Может я чего не учел? Хром уж больно капризный. Всегда с ним мучаюсь, еще больше чем с IE.

UPD Решено добавлением ширины 80% для #content
  • Вопрос задан
  • 3691 просмотр
Решения вопроса 1
mdss
@mdss
#content {
height:100%;
width:80%;
background:lightblue;
overflow: auto;
float:right;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
dudeonthehorse
@dudeonthehorse
Email Developer
а не проще ли использовать position:fixed для левого блока, и при этом прокручивать всю страницу так как это реализовано например тут?
Ответ написан
homm
@homm
А зачем вообще нужен margin-left:20%; у #content, если overflow: auto; формирует новый поток?
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы