Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Chelovekkk
0 / 0 / 0
Регистрация: 17.04.2015
Сообщений: 36
#1

Параллельная вертикальная прокрутка двух блоков и отдельная горизонтальная прокрутка одного из двух блоков - HTML, CSS

11.08.2016, 16:14. Просмотров 471. Ответов 3
Метки нет (Все метки)

Всем привет! Помогите решить проблему, пожалуйста. Есть блок div, внутри которого два блока div (в каждом из них по одной таблице), необходимо реализовать параллельную вертикальную прокрутку двух блоков и отдельную горизонтальную прокрутку одного из двух блоков, расположенных в общем блоке (посмотрите на рисунок 1, может понятнее станет).
Сделала следующим образом:
HTML5
1
2
3
4
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.div1 {
    height:400px;
    overflow-y: scroll;
    width:100%;
}
.div2 {
    width:50%;
    height:400px;
    float: left;
}
.div3 {
    width:300px;
    height:400px;
    float: right;
    overflow-x: scroll;
}
Вертикальная прокрутка получилась для всего блока, но для блока расположенного справа появилась своя и горизонтальная прокрутка и вертикальная(посмотрите на рисунке 2).
Как же это нужно реализовать? Посоветуйте, пожалуйста
0
Миниатюры
Параллельная вертикальная прокрутка двух блоков и отдельная горизонтальная прокрутка одного из двух блоков   Параллельная вертикальная прокрутка двух блоков и отдельная горизонтальная прокрутка одного из двух блоков  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.08.2016, 16:14
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Параллельная вертикальная прокрутка двух блоков и отдельная горизонтальная прокрутка одного из двух блоков (HTML, CSS):

Позиционирование и прокрутка блоков HTML CSS - HTML, CSS
Здраствуйте, есть проблема. У меня есть два дива. Див с id &quot;parent&quot; имеет определенный размер и распологается по центру экрана. Див с id...

Вертикальная прокрутка - HTML, CSS
Перерыл всё тысячу раз, не могу понять откуда взялась полоса вертикальной прокрутки. Хронологию действий отследить трудно, просто обновил...

Горизонтальная прокрутка - HTML, CSS
Можно ли поставить overаflow только для горизонтальной прокрутки?

Горизонтальная прокрутка - HTML, CSS
Добрый день. У меня следующая проблема. Есть разметка &lt;div class=&quot;carousel&quot;&gt; &lt;a href=&quot;#&quot;&gt; &lt;img...

Горизонтальная прокрутка - HTML, CSS
Как создать эффект который есть на сайте google. При уменьшении размера окна браузера, по горизонтали появлялась полоса прокрутки.

Прокрутка одновременно двух div-ов - HTML, CSS
Добрый день! Подскажите, пожалуйста, как сделать одновременную прокрутку двух div-ов. Или исправьте мою ошибку. Есть два div-а,...

3
mrtoxas
Модератор
Эксперт HTML/CSS
2465 / 1800 / 989
Регистрация: 12.07.2015
Сообщений: 4,840
Записей в блоге: 3
11.08.2016, 17:05 #2
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.wrapper {
  width: 500px;
  height: 150px;
  border: 1px solid #ccc;
  margin: 0 auto;
  overflow: hidden;
  overflow-y: scroll;
  box-sizing: border-box;
}
[class^="main-cell"] {
  float: left;
  width: 50%;
  height: 200px;
  overflow: hidden;
  position: relative;
  border: 1px solid black;
  box-sizing: border-box;
  padding: 10px;
}
[class^="main-cell"] .cell-content {
  position: absolute;
  top: 0;
  left: 0;
}
.main-cell2 {
  overflow-x: scroll;
}
.main-cell2 .cell-content {
  width: 500px;
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="wrapper">
  <div class="main-cell1">
    <div class="cell-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolore culpa laudantium ipsum beatae sapiente asperiores, animi, sit repellat eius voluptatibus numquam deserunt. Ad facilis provident architecto nisi officiis. Id.
    </div>
  </div>
  <div class="main-cell2">
    <div class="cell-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolore culpa laudantium ipsum beatae sapiente asperiores, animi, sit repellat eius voluptatibus numquam deserunt. Ad facilis provident architecto nisi officiis. Id.
    </div>
  </div>
</div>
Результат
0
Chelovekkk
0 / 0 / 0
Регистрация: 17.04.2015
Сообщений: 36
11.08.2016, 19:35  [ТС] #3
Спасибо! А возможно ли горизонтальную прокрутку сделать всегда в видимой области а не в конце вертикальной прокрутки?
0
mrtoxas
Модератор
Эксперт HTML/CSS
2465 / 1800 / 989
Регистрация: 12.07.2015
Сообщений: 4,840
Записей в блоге: 3
11.08.2016, 19:49 #4
Добавьте
CSS
1
2
3
.main-cell2 {  
  height:100%;
}
Не совсем понятно, что должно получиться на выходе.
0
11.08.2016, 19:49
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
11.08.2016, 19:49
Привет! Вот еще темы с ответами:

Горизонтальная прокрутка фото - HTML, CSS
Здравствуйте! Скажите пожалуйста, можно ли как-то сделать горизонтальную прокрутку картинок типа как в google когда вводишь поиск фильмов с...

Горизонтальная прокрутка на iphone - HTML, CSS
Здравствуйте, не могу показать скрин, но думаю и так понятно будет. Проблема в том что на айфоне сайт можно прокрутить горизонтально влево...

Горизонтальная прокрутка мышью - HTML, CSS
Делал горизонтальную прокрутку основываясь на этой статье...

Вертикальная Прокрутка блока div - HTML, CSS
Здравствуйте подскажите пожалуйста как настроить прокрутку. На страничке в цикле выводится div блок с информацией , нужно сделать так...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru