Расположите выдвижную панель под верхней навигацией

Я работаю над выдвижной панелью (по этой ссылке). В уроке я вижу, как я могу добиться выдвижной панели с правой стороны, используя фиксированный дисплей, но я хочу, чтобы панель отображалась ниже верхней черной панели навигации, в отличие от фиксированной панели, перекрывающей всю вертикальную высоту. Есть ли способ установить «верх» на значение относительно высоты панели навигации?

<html>

<head>
    <title>CssTest</title>
    <style>
        .main{
            display: flex;
            flex-direction: column;
        }
        .top {
            background-color: black;
            display: flex;
            justify-content: flex-start;
        }

        .a {
            background-color: brown;
        }

        .b {
            background-color: coral;           
        }

        .content{
            display: flex;
            flex-direction: row;
            background-color: darkgoldenrod;
            justify-content: flex-start;
        }

        .content-panel{
            position: fixed;
            background-color: darkorange;
            top:0;
            bottom:0;
            right:0;
            width: 30em;
            /*
            transform: translateX(0%);
            transition: .3s ease-out;
            */
        }
    </style>
</head>

<body>
    <div class = "main">
        <div class = "top">
            <div class = "a">AAAAAAAA</div>
            <div class = "b">BBBBBBBB</div>
        </div>
        <div class = "content">
            <div class = "content-main">content</div>
            <div class = "content-panel">
                this is panel area.
            </div>
        </div>
    </div>
</body>

</html>

Насколько мне известно, вы не можете присвоить фиксированному элементу относительные значения, которые применяются только к position: absolute (принимая родительский элемент за относительную ссылку). Кроме того, проблема с высотой по вертикали, по-видимому, связана не с верхним атрибутом, а с комбинацией верхнего и нижнего, когда оба установлены на 0, это заставляет фиксированный элемент покрывать весь экран. Я предлагаю удалить нижний: 0 или изменить его на автоматический, а затем присвоить вашей панели соответствующее значение высоты.

— 23.12.2020 18:07

css flexbox

23.12.2020 17:21

Приемы 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

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

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

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

window.onload = function () {
  var headerNaV = document.querySelector(".top");
  var contentPanel = document.querySelector(".content-panel");
  
  contentPanel.style.top = headerNaV.offsetHeight + headerNaV.offsetTop + "px";
}

.main{
    display: flex;
    flex-direction: column;
}
.top {
    background-color: black;
    display: flex;
    justify-content: flex-start;
}

.a {
    background-color: brown;
}

.b {
    background-color: coral;           
}

.content{
    display: flex;
    flex-direction: row;
    background-color: darkgoldenrod;
    justify-content: flex-start;
}

.content-panel{
    position: fixed;
    background-color: darkorange;
    top:0;
    bottom:0;
    right:0;
    width: 30em;
    /*
    transform: translateX(0%);
    transition: .3s ease-out;
    */
}

<html>

<head>
    <title>CssTest</title>
</head>

<body>
    <div class = "main">
        <div class = "top">
            <div class = "a">AAAAAAAA</div>
            <div class = "b">BBBBBBBB</div>
        </div>
        <div class = "content">
            <div class = "content-main">content</div>
            <div class = "content-panel">
                this is panel area.
            </div>
        </div>
    </div>
</body>

</html>

23.12.2020 20:24

Другие вопросы по теме

Как остановить нежелательное движение ссылки при наведении курсора с помощью «Flex» в качестве отображения?

Как выровнять правильно, когда срабатывает flex-wrap, но в противном случае выровнять пространство между содержимым?

Мои контейнеры flexbox не реагируют на flex-direction:column

Установка поля на авто во flexbox

Как я могу сделать этот макет Святого Грааля на основе CSS Grid с изменяемым размером заголовка, нижнего колонтитула и боковых панелей?

Почему мои дочерние элементы div не прокручиваются и не выравниваются по столбцам?

Создайте круг, который заполнит оставшееся пространство в ячейке flexbox

Как пристыковать ExtJS Ext.Panel с изменяемым размером к другой закрепленной панели с изменяемым размером

Bootstrap 3 - одинаковая высота для 4 столбцов, применяемых к телу div

Попытка устранить пробелы между элементами списка в CSS/Bulma

Расположите выдвижную панель под верхней навигацией

Ответы 1

Другие вопросы по теме

Похожие вопросы