Возможен ли этот макет с чистым css?

Я хочу показывать изображения во всплывающем окне (div с фиксированным положением).

Попап должен состоять из (сверху вниз):

Элемент "a" фиксированной высоты для закрытия всплывающего окна (позже я заменю его более красивой кнопкой закрытия).
img-элемент. Изображение должно быть максимально большим, но не больше своего исходного размера. Кроме того, описание изображения (пункт 3) должно всегда оставаться видимым.
Описание изображения (только текст). Должен быть таким же высоким, как его содержание.

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

Как видите, это не так уж и сложно.

В настоящее время я решил это с помощью javascript (событие onresize). Но чистый css был бы красивее. Я играл с сеткой, но она не работает. У меня также не было успеха с гибкой коробкой. Может кто исправит...

#grid
{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    position:fixed;
    top:0;
    right:0;
    left:0;
    background:yellow;
    max-height:100%;
}

#head
{
    height:20px;
    text-align:center;
    background:orange;
}

#img
{
    margin:0 auto;
}

#footer
{
    text-align:center;
    background:green;
}

<div id = "grid">
    <a id = "head" href = "#" onclick = "document.getElementById('grid').style.display='none';">close</a>
    <img id = "img" src = "https://i.postimg.cc/1tdZsLn3/1554503066.png" />
    <div id = "footer">This is the image description.</div>
</div>

Это рабочая версия javascript:

function MyFoto() // create class
{
}

MyFoto.adjust =
function()
{
    var _w = document.getElementById("container").clientHeight - 50 - document.getElementById("info").clientHeight; // 50 = close button + some more
    document.getElementById("img").style.maxHeight = (_w < 1 ? 1 : _w).toString() + "px";
};

MyFoto.close =
function()
{
    document.getElementById("container").style.display = "none";
    return false;
};

window.onresize = MyFoto.adjust;
MyFoto.adjust();

#container
{
    top:0;
    right:0;
    bottom:0;
    left:0;
    position:fixed;
    background-color:rgba(0,0,0,0.7);
    text-align:center;
}

#a
{
    display:block;
}

#img
{
    vertical-align:bottom; /* removes space under image */
    max-width:100%;
    background:white;
}

<div id = "container">
  <a id = "a" href = "#" onclick = "return MyFoto.close()">close</a>
  <img id = "img" alt = "img" src = "https://i.postimg.cc/1tdZsLn3/1554503066.png" />
  <div id = "info">Photo description!</div>
</div>

"В настоящее время я решил это с помощью javascript" Где javascript? Это поможет, если мы сможем увидеть, как это работает в настоящее время.

— 06.04.2019 20:04

добавлена js-версия.

— 06.04.2019 21:01

css

06.04.2019 19:56

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

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

Система управления парковками с использованием HTML, CSS и JavaScript

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Использование простого макета flexbox должно дать вам желаемые результаты:

#grid
{
    display:flex;
    flex-direction: column;
    position:fixed;
    top:0;
    right:0;
    left:0;
    background:yellow;
    max-height:100%;
}

#head
{
    height:20px;
    text-align:center;
    background:orange;
}

#img
{
    margin:0 auto;
}

#footer
{
    text-align:center;
    background:green;
}

<div id = "grid">
    <a id = "head" href = "#" onclick = "document.getElementById('grid').style.display='none';">close</a>
    <img id = "img" src = "https://i.postimg.cc/1tdZsLn3/1554503066.png" />
    <div id = "footer">This is the image description.</div>
</div>

Обновление 1

Поскольку в google chrome есть проблемы с определением высоты в контейнерах flexbox (как ясно описано в этом вопрос о переполнении стека), необходимо использовать дополнительную обертку, чтобы получить такой же макет, как в Firefox. Обновленный фрагмент кода показан ниже:

#grid
{
    display:flex;
    flex-direction: column;
    position:fixed;
    top:0;
    right:0;
    left:0;
    background:yellow;
    max-height:100%;
}

#head
{
    height:20px;
    text-align:center;
    background:orange;
}

#img
{
    margin:0 auto;
    object-fit: contain;
    max-width: 100%;
}

#footer
{
    text-align:center;
    background:green;
}

.img-wrapper {
    display: flex;
    min-height: 0;
}

<div id = "grid">
    <a id = "head" href = "#" onclick = "document.getElementById('grid').style.display='none';">close</a>
    <div class = "img-wrapper">
      <img id = "img" src = "https://i.postimg.cc/1tdZsLn3/1554503066.png" />
    </div>
    <div id = "footer">This is the image description.</div>
</div>

Обновление 2

Делаем исправления Chrome немного более надежными.

#grid
{
    display:flex;
    flex-direction: column;
    position:fixed;
    top:0;
    right:0;
    left:0;
    background:yellow;
    max-height:100%;
}

#head
{
    height:20px;
    text-align:center;
    background:orange;
}

#img
{
    margin:0 auto;
    object-fit: contain;
    max-width: 100%;
    min-height: 0;
}

#footer
{
    text-align:center;
    background:green;
}

.img-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

<div id = "grid">
    <a id = "head" href = "#" onclick = "document.getElementById('grid').style.display='none';">close</a>
    <div class = "img-wrapper">
      <img id = "img" src = "https://i.postimg.cc/1tdZsLn3/1554503066.png" />
    </div>
    <div id = "footer">This is the image description.</div>
</div>

Спасибо, но есть одна проблема. В файрфоксе работает отлично. Но Chrome, похоже, игнорирует максимальную высоту 100%.

— 07.04.2019 12:25

Я обновил ответ решением, которое устраняет проблему в Chrome.

— 07.04.2019 21:30

Все еще не то же самое. Если вертикального пространства слишком много, между изображением и нижним/верхним колонтитулом будет место. Вот скриншот: i.postimg.cc/rFGyGmt1/Скриншот-20190409-133442.png

— 09.04.2019 13:35

Я сделал еще одно обновление, посмотрите, дадут ли дополнительные изменения удовлетворительные результаты.

— 09.04.2019 21:39

06.04.2019 21:45