Абсолютное позиционирование с учетом CSS

Question

У меня есть раскрывающееся меню, положение которого должно быть в зависимости от высоты заголовка. Высота заголовка зависит от содержимого, размера шрифта и заполнения, заданного медиа-запросами в зависимости от высоты видового экрана.

HTML:

<header> 
    <p>Example</p> 
    <nav> 
    <a>Link</a> 
    <a>Link</a> 
    <a>Link</a> 
    </nav> 
</header> 

CSS:

body { 
    background-color: white; 
} 

header { 
    background-color: grey; 
    padding: 1rem 0; 
    position: fixed; 
    width: 100%; 
} 

@media(max-height: 500px) { 
    header { 
    padding: 0; 
    } 
} 

nav { 
    background-color: #CCC; 
    position: absolute; 
    top: 82px; 
    width: 100%; 
} 

a { 
    border-bottom: 1px solid white; 
    display: block; 
    padding: 0.75rem; 
} 

Представьте nav является раскладывается выпадающее меню.

Fiddle: https://jsfiddle.net/mjufc63b/2/

Если уменьшить высоту вашего окна ниже 500 пикселей, появляется белый разрыв между заголовком и нав, что не должно быть так. Также, если вы измените размер шрифта вашего браузера.

Есть ли решение, чтобы выпадающее меню всегда под заголовком не зависело от высоты заголовка, а также над другим содержимым (какое абсолютное позиционирование делает), не используя javascript и не перемещая nav за пределами header?

Answer 1

Установите верхнюю до 100%, вне запроса СМИ

body { 
 
    background-color: white; 
 
} 
 

 
header { 
 
    background-color: grey; 
 
    padding: 1rem 0; 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 

 
@media(max-height: 500px) { 
 
    header { 
 
    padding: 0; 
 
    } 
 
} 
 

 
nav { 
 
    background-color: #CCC; 
 
    position: absolute; 
 
    top: 100%; 
 
    width: 100%; 
 
} 
 

 
a { 
 
    border-bottom: 1px solid white; 
 
    display: block; 
 
    padding: 0.75rem; 
 
}

<header> 
 
    <p>Example</p> 
 
    <nav> 
 
    <a>Link</a> 
 
    <a>Link</a> 
 
    <a>Link</a> 
 
    </nav> 
 
</header>

Answer 2

Внутри вашего медиа-запроса для высоты не более 500 пикселей, удалите фиксированный верхний край от nav.

@media(max-height: 500px) { 
    header { 
    padding: 0; 
    } 
    header > nav { 
    top: auto; 
    } 
} 

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

nav { 
    background-color: #CCC; 
    position: absolute; 
    top: auto 
    width: 100%; 
} 

header Так как ваш фиксировано не будет толкать другие элементы, поэтому для того, чтобы сделать так, что вам нужно, чтобы добавить пространство для внутренних элементов. Например:

header { 
    background-color: grey; 
    position: fixed; 
    width: 100%; 
} 

header p{ 
    padding: 1rem 0; 
} 

Если убрать отступы от header и добавить его к своему внутреннему p элементу, он будет толкать nav. Но в целом для большего количества контента вы можете создать новый элемент оболочки внутри, который будет работать как «космонавт».