如何在 flex 布局中设置全高

Question

我有一个 flex 布局，它的代码如下所示

<div class="navbar-collapse">
  <ul class="navbar-nav">
    <li class="nav-item ">
        <a href="/dashboard">Home</a>
    </li>
    <li class="nav-item ">
        <a href="/profile">Profile</a>
    </li>
    <li class="nav-item">
        <a href="/logout">Logout</a>
    </li>
  </ul>
</div>

它的css是这样的

.navbar-collapse {
  display: flex !important;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-align: center;
  align-items: center;
}
.navbar-nav {
  margin-left: auto !important;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: row;
  padding-left: 0;
  list-style: none;
}
.navbar-nav .nav-item {
  display: inline-flex;
  text-align: -webkit-match-parent;
  position: relative;
  flex-shrink: 0;
  padding-bottom: 0;
  height: 100%;
}
.navbar-nav .nav-item a {
  color: #fff;
  font-weight: 400;
  text-transform: capitalize;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0 0.1rem;
  white-space: nowrap;
  position: relative;
}

看起来像这样

a 元素目前似乎没有高度，我希望它和父元素一样高，如何？谢谢。

追加：

图片显示了当我处于 chrome 开发者模式时的样子。以上是我的全部代码。

Answer 1

问题在于ul 元素的默认样式。

ul 的默认边距值为1em，如下所示。

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

您必须覆盖它并将其作为填充标记提供给您的锚标记，因为您正在处理锚标记的悬停效果。所以这个值应该设置为填充，这样在悬停时不会破坏布局。

我已经在下面的 sn-p 中解决了这个问题。

工作小提琴

.navbar-collapse {
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-align: center;
    align-items: center;
}

.navbar-nav {
    margin-left: auto !important;
    margin: 0; /* Added */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: row;
    padding-left: 0;
    list-style: none;
}

.navbar-nav .nav-item {
    display: inline-flex;
    text-align: -webkit-match-parent;
    position: relative;
    flex-shrink: 0;
    padding-bottom: 0;
    height: 100%;
}

.navbar-nav .nav-item a {
    color: black;
    font-weight: 400;
    text-transform: capitalize;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 0 0.1rem;
    white-space: nowrap;
    position: relative;
}

/* New styles added */
.navbar-nav .nav-item a {
    padding: 1em 0;
}

.navbar-nav .nav-item a:hover {
    color: #fff;
    background-color: #6c757d;
}
.navbar-collapse {
    background-color: #00a82d;
}

<div class="navbar-collapse">
    <ul class="navbar-nav">
        <li class="nav-item ">
            <a href="/dashboard">Home</a>
        </li>
        <li class="nav-item ">
            <a href="/profile">Profile</a>
        </li>
        <li class="nav-item">
            <a href="/logout">Logout</a>
        </li>
    </ul>
</div>

Answer 2

我现在从 cmets 中的小提琴实现了您的其余代码。您需要将ul 的高度设为父级的 100%：.navbar-nav { height: 100%; }。在我的 sn-p 中，您在 CSS 行 301 中声明：a { display: block; } -> 将值交换为 flex 以保持锚点居中的文本。

.navbar-nav { 
  height: 100%;  
}

.navbar-nav a {
  display: flex; /* swap this with line 301 */
}

/* original css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

main {
  display: block
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

pre {
  font-family: monospace, monospace;
  font-size: 1em
}

a {
  background-color: transparent
}

abbr[title] {
  border-bottom: 0;
  text-decoration: underline;
  text-decoration: underline dotted
}

b,
strong {
  font-weight: bolder
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -0.25em
}

sup {
  top: -0.5em
}

img {
  border-style: none;
  vertical-align: middle;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  padding: .35em .75em .625em
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

progress {
  vertical-align: baseline
}

textarea {
  overflow: auto
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

details {
  display: block
}

summary {
  display: list-item
}

template {
  display: none
}

[hidden] {
  display: none
}

html {
  font-size: 625%;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  height: 100%;
  width: 100%;
}

body {
  font-size: 0.16rem;
  height: 100%;
  width: 100%;
  color: #6c757d;
  line-height: 1.75;
}

a {
  text-decoration: none;
}

.wrapper {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

.container {
  width: 100%;
  flex-shrink: 0;
}

.row {
  padding: 0 .12rem;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  flex: 1;
}

.navbar-brand {
  font-size: 0.32rem;
  color: #00a82d;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-collapse {
  display: flex!important;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-align: center;
  align-items: center;
}

.navbar-nav {
  margin-left: auto!important;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: row;
  padding-left: 0;
  list-style: none;
}

.navbar-nav .nav-item {
  display: inline-flex;
  text-align: -webkit-match-parent;
  position: relative;
  flex-shrink: 0;
  padding-bottom: 0;
  height: 100%;
}

.device-width {
  width: 9.6rem;
  margin: 0 auto;
}

.usercenter-navbar {
  background-color: #00a82d;
  line-height: 1;
}

.usercenter .device-width {
  width: 98%;
}

.usercenter-navbar .navbar-brand {
  color: #fff;
  font-size: .28rem;
  font-weight: 700;
}

.usercenter-navbar .navbar-nav .nav-item a {
  color: #fff;
  font-weight: 400;
  text-transform: capitalize;
  cursor: pointer;
  /* display: block; */
  align-items: center;
  padding: 0 0.1rem;
  white-space: nowrap;
  position: relative;
}

.usercenter-navbar .navbar-nav .nav-item a:hover {
  color: #fff;
  background-color: #6c757d;
}

@media screen and (max-width: 768px) {
  body {
    font-size: 0.13rem;
  }
  .auth-form {
    width: 80%;
  }
}

@media (min-width: 1200px) {
  .device-width {
    width: 11.4rem;
  }
  .auth-form {
    width: 22%;
  }
}

@media (min-width: 1920px) {
  .device-width {
    width: 11.4rem;
  }
  .auth-form {
    width: 20%;
  }
}

@media (min-width: 1200px) and (max-width: 1919px) {
  .device-width {
    width: 11.4rem;
  }
  .auth-form {
    width: 26%;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .device-width {
    width: 10.8rem;
  }
  .auth-form {
    width: 30%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .device-width {
    width: 9.6rem;
  }
  .auth-form {
    width: 30%;
  }
}

<div class="wrapper usercenter">
  <div class="container usercenter-navbar">
    <div class="device-width">
      <div class="row">
        <a class="navbar-brand" href="/">Workspace</a>
        <div class="navbar-collapse">
          <ul class="navbar-nav">
            <li class="nav-item  current">
              <a href="/dashboard">Home</a>
            </li>
            <li class="nav-item ">
              <a href="/profile">Profile</a>
            </li>
            <li class="nav-item">
              <a href="/logout">Logout</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>