Задать вопрос
UseRifle
@UseRifle
css

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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Frontend React
Glob-com
от 100 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Сайт с вебзвонками и чатами на react
24 апр. 2024, в 17:33
10000 руб./за проект
Правки в webApp готового и написанного телеграмм бота next, tailwind
24 апр. 2024, в 17:26
6000 руб./за проект
Доработать сайт на React + Nest
19 апр. 2024, в 13:38
1500 руб./в час
Ещё заказы