PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Gerd
Отправлено: 04 Мая, 2019 - 09:30:57
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 632
Дата рег-ции: Сент. 2012  


Помог: 0 раз(а)

[+][+][+]


CODE (html):
скопировать код в буфер обмена
  1. <div class='container' style="width: 500px;">
  2.     <div class='left'  style='height: 200px;'></div>
  3.     <ul class='right'>
  4.             <li class="lists">NEWS</li>
  5.                 <li class="lists">NEWS</li>
  6.                 <li class="lists">NEWS</li>
  7.                 <li class="lists">NEWS</li>
  8.                 <li class="lists">NEWS</li>
  9.                 <li class="lists">NEWS</li>
  10.                 <li class="lists">NEWS</li>
  11.                 <li class="lists">NEWS</li>
  12.                 <li class="lists">NEWS</li>
  13.                 <li class="lists">NEWS</li>
  14.                 <li class="lists">NEWS</li>
  15.                 <li class="lists">NEWS</li>
  16.                 <li class="lists">NEWS</li>
  17.                 <li class="lists">NEWS</li>
  18.                 <li class="lists">NEWS</li>
  19.                 <li class="lists">NEWS</li>
  20.                 <li class="lists">NEWS</li>
  21.                 <li class="lists">NEWS</li>
  22.                 <li class="lists">NEWS</li>
  23.                 <li class="lists">NEWS</li>
  24.                 <li class="lists">NEWS</li>
  25.                 <li class="lists">NEWS</li>
  26.                 <li class="lists">NEWS</li>
  27.        
  28.         </ul>
  29. </div>
  30. <style>
  31. .container {
  32.   display: flex;
  33. }
  34. .left {
  35.   flex-grow: 1;
  36. }
  37. .right {
  38.   margin: 0;
  39.   padding: 0;
  40.   flex-basis: 20%;
  41.   min-width: 100px;
  42.   max-width: 200px;
  43.   overflow-y: auto;
  44. }
  45. </style>
  46.  


Возможно ли сделать так, чтобы правый блок не задавая ему высоты, адаптировался под высоту левого блока и соответственно работал скрол.
 
 Top
Vladimir Kheifets
Отправлено: 04 Мая, 2019 - 12:07:17
Post Id



Посетитель


Покинул форум
Сообщений всего: 402
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 19 раз(а)




Gerd пишет:
Возможно ли сделать так, чтобы правый блок не задавая ему высоты, адаптировался под высоту левого блока и соответственно работал скрол.

Добый день!
Попробуйте сделать так:
Спойлер (Отобразить)
Удачи!
 
 Top
Gerd
Отправлено: 04 Мая, 2019 - 15:44:24
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 632
Дата рег-ции: Сент. 2012  


Помог: 0 раз(а)

[+][+][+]


Не работает

height: 200px;

Необходимо чтобы правый блок принимал высоту левого блока и по необходимости добавлял скрол. Возможно ли это сделать не используя таблицы?

(Отредактировано автором: 04 Мая, 2019 - 15:45:02)

 
 Top
Vladimir Kheifets
Отправлено: 04 Мая, 2019 - 20:06:38
Post Id



Посетитель


Покинул форум
Сообщений всего: 402
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 19 раз(а)




Gerd пишет:
Не работает

height: 200px;

Необходимо чтобы правый блок принимал высоту левого блока и по необходимости добавлял скрол. Возможно ли это сделать не используя таблицы?

Изменил CSS - зафиксировал высоту, скролл появился
Спойлер (Отобразить)
Можно по-другому, изменил Ваш c display: flex зафиксировал высоту .container
.left наследует высоту родителя .container
Спойлер (Отобразить)

(Отредактировано автором: 05 Мая, 2019 - 08:32:29)

 
 Top
Gerd
Отправлено: 04 Мая, 2019 - 22:35:50
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 632
Дата рег-ции: Сент. 2012  


Помог: 0 раз(а)

[+][+][+]


PHP:
скопировать код в буфер обмена
  1. .container ul{
  2.   height: 200px;
  3.   min-width: 100px;
  4.   max-width: 200px;
  5.   height: 200px;
  6.   overflow-y:scroll;
  7.   }


Естественно скрол будет работать тогда когда выставлена высота блока, к тому же дважды. А вот как сделать так, чтобы скрол работал на правом блоке, а высота блока адаптировалась по левому блоку.

То есть не должно быть фиксированной высоты у .container ul и у родителя .container тоже не должно быть высоты. Высота только у левого блока class='left'
(Добавление)
В моем случаи ширина правого блока адаптируется, но трудность в том, что если содержимое правого блока(высота) больше, сам скрол он неработает.

(Отредактировано автором: 04 Мая, 2019 - 22:37:40)

 
 Top
Vladimir Kheifets
Отправлено: 05 Мая, 2019 - 08:24:25
Post Id



Посетитель


Покинул форум
Сообщений всего: 402
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 19 раз(а)




Gerd пишет:
Естественно скрол будет работать тогда когда выставлена высота блока, к тому же дважды. А вот как сделать так, чтобы скрол работал на правом блоке, а высота блока адаптировалась по левому блоку.
То есть не должно быть фиксированной высоты у .container ul и у родителя .container тоже не должно быть высоты. Высота только у левого блока class='left'
(Добавление)
В моем случаи ширина правого блока адаптируется, но трудность в том, что если содержимое правого блока(высота) больше, сам скрол он неработает.

Извините, во 2 строке д.б. max-height: 200px
Попробуйте, с JS. Не совсем понял, когда должен появляться скролл, поэтому остaвил alert, измените условие, как Вам захочется.
Спойлер (Отобразить)

(Отредактировано автором: 05 Мая, 2019 - 08:28:15)

 
 Top
Gerd
Отправлено: 06 Мая, 2019 - 01:49:19
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 632
Дата рег-ции: Сент. 2012  


Помог: 0 раз(а)

[+][+][+]


А без js, возможно реализовать?
(Добавление)
Как быть если новостей мало, а левый блок во всю высоту экрана, как сделать так, чтобы высота правого блока была по высоте его контента, а не по высоте левого?
(Добавление)
Возможно сделать так, чтобы на родительский блок не выставлять свойство display:flex, а к примеру чтобы на родительском блоке было выставлено свойство display:block и при этом ширина правого блока была в процентах + max + min и в тоже время ширина левого блока заполняло свободное пространство по левую сторону правого блока.


???
 
 Top
Gerd
Отправлено: 06 Мая, 2019 - 03:55:42
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 632
Дата рег-ции: Сент. 2012  


Помог: 0 раз(а)

[+][+][+]


Через absolute, не вариант поскольку высота родителького блока не будет подстраиваться под высоту дочернего.
 
 Top
Vladimir Kheifets
Отправлено: 06 Мая, 2019 - 14:43:15
Post Id



Посетитель


Покинул форум
Сообщений всего: 402
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 19 раз(а)




Gerd пишет:
А без js, возможно реализовать?
(Добавление)
Как быть если новостей мало, а левый блок во всю высоту экрана, как сделать так, чтобы высота правого блока была по высоте его контента, а не по высоте левого?
(Добавление)
Возможно сделать так, чтобы на родительский блок не выставлять свойство display:flex, а к примеру чтобы на родительском блоке было выставлено свойство display:block и при этом ширина правого блока была в процентах + max + min и в тоже время ширина левого блока заполняло свободное пространство по левую сторону правого блока.
???


Высота и ширна блока будет по высоте и ширине его контента, ecли применить display:inline-block
Про "блок в процентах + max + min", попробуйте задание ширны, через calc, например,
CODE (html):
скопировать код в буфер обмена
  1. width:calc(100% - 11px);
  2. width: -moz-calc(100% - 11px);
  3. width: -webkit-calc(100% - 11px);
Есть сомнения, про несколько сколлингов на одой странице...
Может передумаете?

(Отредактировано автором: 06 Мая, 2019 - 14:46:15)

 
 Top
Gerd
Отправлено: 07 Мая, 2019 - 06:16:38
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 632
Дата рег-ции: Сент. 2012  


Помог: 0 раз(а)

[+][+][+]


Как быть:
<div class='container'>
<div class='left' >xxxx</div>
<ul class='right'>
<li class="lists">NEWS</li>
<li class="lists">NEWS</li>
<li class="lists">NEWS</li>
<li class="lists">NEWS</li>
</ul>
</div>

<div class='container'>
<div class='left' >xxxx</div>
<ul class='right'>
<li class="lists">NEWS</li>
<li class="lists">NEWS</li>
<li class="lists">NEWS</li>
<li class="lists">NEWS</li>
</ul>
</div>


Высота правого блока на 50% меньше левого, скрола нет. Хорошо, на мобильной версии возможно выставить свойство display:block на контейнер и тогда отображение в мобильной версии на ура.

Другое дело, если версия страницы пк, новостей по категории немного и остается свободное место, дале во втором контейнере идут коментарии и в правом блоке схожие новости. Как так сделать, чтобы схожие новости они смещались к протную к новостям категории независимо от высоты левого блока.

Все работает на пк версии и на мобильно, но вот это свободное место оно не к месту. Есть решение этому? Так чтобы это поправить через css стили.

(Отредактировано автором: 07 Мая, 2019 - 06:17:48)

 
 Top
Vladimir Kheifets
Отправлено: 07 Мая, 2019 - 22:15:15
Post Id



Посетитель


Покинул форум
Сообщений всего: 402
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 19 раз(а)




Изините, а Вы где-то проверяте, для чего версия?
Из кода, который Вы показали не видно.
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB