Я центрирую DIV внутри другого DIV, используя flexbox. Подумайте о диалоговом окне, которое появляется в центре экрана при необходимости.
Это работает нормально, однако выглядело бы намного лучше, если бы пространство над и под диалоговым окном было не совсем одинаковым, с 40% оставшегося пространства над и 60% под диалоговым окном. Это становится сложно, потому что высота диалога зависит от количества текста внутри.
Например, если высота браузера составляет 1000 пикселей, а высота диалогового окна - 400 пикселей, я хочу, чтобы оставшееся вертикальное пространство (600 пикселей) было на 240 пикселей выше и на 360 пикселей ниже диалогового окна. Я мог бы сделать это с помощью Javascript, но мне любопытно, есть ли какой-нибудь умный способ с CSS. Я попытался добавить нижнее поле для #dialogBox DIV, но это не работает, когда высота диалога приближается к высоте браузера.
#dialogBoxPanel
{
position:absolute;
display:flex;
align-items:center;
justify-content:center;
left:0px;
top:0px;
width:100%;
height:100%;
}
#dialogBox
{
width:350px;
}
<div id="dialogBoxPanel">
<div id="dialogBox">Text</div>
</div>
Ответы:
Используйте псевдоэлемент и направление столбца для имитации пробела. Просто настройте
flex-grow
псевдоэлемент, чтобы контролировать, сколько свободного места должно занимать каждый. Равный flex-grow даст равное пространство:Показать фрагмент кода
Вы также можете использовать
2
и3
. Нам просто нужно сохранить такое же соотношение:Показать фрагмент кода
Другая идея состоит в том, чтобы использовать верхнее значение, равное
40%
и исправить положение с помощью translate (та же логика, что и50%
при центрировании)источник
Это решение использует
display: grid
, это новая функция, поэтому обязательно проверьте поддержку браузера и нажмите здесь, чтобы узнать больше.Эта строка управляет верхним и нижним пространством:
grid-template-rows: 40fr [content-start] auto [content-end] 60fr;
Текст фрагмента может быть отредактирован, чтобы вы могли убедиться, что поле остается в центре, даже если высота изменяется.
источник
4fr auto 6fr
. То, что у вас работает, но с некоторым переполнением, так как 40% + 60% + 1fr всегда будет больше, чем 100%, и вы центрируетесь, поэтому наложение будет разделено поровну сверху и снизу: jsfiddle.net/cobutn0e/2 . Вы также заметите , что это не 100% , как ожидалось1fr=minmax(auto,1fr)
и в вашем случае она упадет ,auto
поскольку нет ни одного свободного места , так как 40% + 60% = 100% (именно поэтому у вас всегда будет переполнение)Вы можете добавить разделители div и установить flex-grow с соотношением 4: 6.
источник
Простой способ с использованием позиции и поля, я предположил, что высота вашего диалога всегда составляет 40% от высоты браузера.
HTML
источник