Как получить три высоты div: один на основе процента, один для заполнения и один на основе ширины изображения - PullRequest
Новая
       8

Как получить три высоты div: один на основе процента, один для заполнения и один на основе ширины изображения

0 голосов
/ 15 февраля 2019

Желаемый результат:

enter image description here

Подробнее:

Прямо сейчасЯ устанавливаю высоту Div на основе оценок (т. Е. 10% для панели поиска, 60% для средней и 30% для нижней части) и задаю размер миниатюр, чтобы они подходили для моего телефона Samsung.Проблема в том, что на разных телефонах ширина разная и Div3 заканчивается большими границами.Чтобы усложнить ситуацию, Div2 может прокручивать вверх / вниз (небольшая проблема), но Div3 может прокручивать влево / вправо (умеренная проблема).

Все миниатюрные изображения гарантированно имеют формат 16: 9 (я полагаю), поскольку они получены здесь https://img.youtube.com/vi/NJ2YyejQjpw/maxresdefault.jpg

У меня возникают концептуальные проблемы при попытке определить размер div (Div3)на высоту, сгенерированную при растяжении изображения (больше или меньше) ширины экрана)

Вопрос: Как я могу получить три нижних деления, учитывая (1) вертикальную прокруткув Div2 и (2) горизонтальная прокрутка в Div3

код: JSFiddle код .Попробуйте на iPhone X, выглядит странно

Важные разделы: 

#search_bar {
    width: 100%;
    height: 10%;
    border: 0px;
    float: right;
    padding:0px;
    position: relative;
    background-color:red;
}

#search_results {
    width: 100%;
    height: 58%;
    padding:4px;
    float: right;
    overflow:auto;
    background-color:green;
}

#playlist_reel {
    width: 100%;
    height: 32%;
    padding:4px;
    clear: both;
    overflow-x: auto;
    white-space: nowrap;
    background-color:blue;
}

1 Ответ

0 голосов
/ 15 февраля 2019

Я отказался от включенных вами диаграмм и попытался воспроизвести его простую версию.

  • Использовать flexbox для разметки столбцов
  • Занимать #search_results столько места, скольковозможно
  • Пусть #search_bar и #playlist_reel занимают только место, которое они занимают (полностью настраивается)
  • Используйте background-image для #search_results, чтобы элемент всегда был закрыт.
  • Используйте статический img в .bottom, чтобы он занимал фактическое пространство DOM

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

Примечание: Эта демонстрация легче просматривается либо в режиме «полной страницы» (здесь в SO), либо в jsFiddle . 

html, body { margin: 0; }

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: 100%;
  margin: 0 auto;
}

#search_bar [type=search] {
  width: 100%;
  padding: 1em;
  font-size: 1.25rem;
}

#search_results {
  flex-grow: 1;
  background-image: url('http://placekitten.com/400/500');
  background-size: cover;
}

img {
  max-width: 100%;
  height: auto;
}
<div class="container">
   <div id="search_bar">
     <input placeholder="Search" type="search"> 
   </div>
  <div id="search_results"></div>
  <div id="playlist_reel">
    <img src="http://placekitten.com/400/50" alt="">
  </div>
</div>

jsFiddle

...