столбцы жидкости с изображением 100% высоты

Я пытаюсь настроить гибкий макет столбца для сайта, над которым я работаю. Я хотел бы сделать это без javascript, но похоже, что это может оказаться самым простым вариантом. В любом случае, кто-нибудь знает, как это сделать с помощью CSS?

Оба столбца должны заполнить высоту браузера. Левый столбец содержит изображение с соотношением сторон 2:3, высотой: 100% и шириной: авто, поэтому ширина левого столбца будет меняться в зависимости от высоты браузера. Правая колонка должна заполнить оставшееся пространство.

Я видел трюк с использованием float:left и overflow: hidden, который отлично работает, за исключением того, что div не изменяет размер себя правильно при изменении размера окна браузера.

Вот упрощенная скрипка, демонстрирующая проблему, с приведенным ниже CSS:

.left-column {
    float: left;
}
.left-column img {
    height: 100%;
    display: block;
    width: auto;
}
.right-column {
    box-sizing: border-box;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: scroll;
}
.left-column, .right-column {
    height: 100%;
}

https://jsfiddle.net/v7unnhnc/2/

Похоже, что .left-column не изменяет размер автоматически. Есть идеи?


css dynamic-columns height fluid-layout
person Kevin Fleischman    schedule 15.04.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

в основном ваш код работает нормально. Вы можете добавить display:inline-block в левый столбец, и вы увидите, что контейнер img адаптируется при изменении размера по вертикали, однако на этот раз текст не будет отображаться должным образом.

Проблема (если проблема) заключается в том, что ширина вашего контейнера (левая) ... та, что с вашим width:auto (и вам действительно не нужно добавлять ее в свой css, поскольку ваше изображение будет устанавливать ширину контейнера, когда переполнение скрыто .. при плавании) не поймет изменение размера img без перезагрузки страницы, даже если вы визуально это видите.

Но важно знать, что многие веб-разработчики в наши дни слишком сосредоточены на (имхо) создании адаптивного дизайна при изменении размера окна, что ЦЕЛЬ не в этом. Основная цель состоит в том, чтобы ваша сеть адаптировалась к любому размеру окна ваших пользователей (или будущих пользователей) в момент загрузки вашей сети. И ваш код подходит именно для этого.

Просто такие люди, как мы, могут зайти в сеть и начать вручную изменять размер окна, чтобы проверить его отзывчивость... и даже в этом случае подавляющее большинство из нас просто проверяет изменение размера по оси x.

Вероятность того, что кто-то заметит, что ваш веб-сайт не работает нормально при изменении размера окна (ось Y), составляет... что ж, я надеюсь, что у вас ОЧЕНЬ много людей замечают. это будет означать, что у вас много посетителей.

person Alvaro Menéndez    schedule 15.04.2015