Как заставить элементы занимать 100% пространства их родителей? - PullRequest
Новая
       28

Как заставить элементы занимать 100% пространства их родителей?

2 голосов
/ 17 марта 2019

У меня есть несколько ссылок, которые мне нужны, чтобы занять 100% доступной им высоты, к сожалению, я не могу заставить ее работать

Версия JSFiddle (вы можете попробовать это сами): JSFiddle с таким же точным кодом 

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: rgb(220, 220, 220);
}

nav span {
    display: inline-block;
}

nav {
    background-color: #ED2939;
}

nav h1 {
    background-color: blue;
}

nav a {
    background-color: blue;
    color: white;
    display: inline-block;
    height: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="CSS/styles.css">
    <title>Document</title>
</head>

<body>
    <nav>
        <span>
            <h1>My Page</h1>
        </span>
        <a href="#">Home</a>
        <a href="#">More</a>
        <a href="#">About</a>
    </nav>
</body>

</html>

Как видите, ссылки не будут занимать 100% пространства, несмотря на наличие display: inline-block и height: 100%, как мне это сделать?это без жесткого кодирования значений или использования отступов?И после этого центрировать текст по вертикали?

Ответы [ 2 ]

1 голос
/ 17 марта 2019

Только для справки, почему ваш CSS не работает должным образом:

Работа с процентом height относится к родительскому элементу. Если родительский элемент в вашем случае nav не имеет установленной высоты, высота элементов (в вашем случае nav a) по умолчанию равна auto .

Таким образом, чтобы ваш пример работал, вам нужно установить высоту nav на некоторое непроцентное фиксированное значение, например 28px . Однако у ваших элементов встроенного блока будет проблема с выравниванием, а также естественное видимое пространство, предшествующее элементу.

Как уже было сказано выше, либо придерживайтесь display: flex - Прочитайте хорошее руководство здесь Полное руководство по Flexbox или (устаревшее) display: block; float: left; и набор line-height ,

0 голосов
/ 17 марта 2019

ЭТО РЕДАКТИРОВАТЬ, ЧТОБЫ СДЕЛАТЬ В КОД 

nav {
    background-color: #ED2939;
    display:flex;
}
nav a {
    background-color: blue;
    color: white;
    display: flex;
    align-items: center;
}

РЕЗЮМЕ

Установите "nav" и "a" для сгибания и выравнивания центральных элементов "a".

JSFiddle: https://jsfiddle.net/b9aergwu/

...