Question

我有以下代码段：

.topbar-container {
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
  background-color: #2d3e50;
  z-index: 999;
  display: flex; }

.navi-container {
  width: 100%;
  height: 50px;
  background-color: #119c7e;
  position: fixed;
  top: 100px;
  z-index: 999;
  display: flex;
  justify-content: center; }
  @media (min-width: 992px) {
    .navi-container .navi-menu {
      width: 992px;
      height: 100%;
      color: #2d3e50;
      overflow: hidden;
      }
      .navi-container .navi-menu a {
        display: inline-block;
position: relative;
top: 50%;
transform: translateY(-50%);} }

.portfolio-container {
  width: 992px;
  position: absolute;
  top: 155px; }

.app-container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  top: 0px;
  position: relative;
  align-items: center; }

* {
  padding: 0;
  margin: 0; }

html,
body {
  height: 100%;
  width: 100%;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif; }

#root {
  box-sizing: border-box;
  height: 100%;
  width: 100%; }

<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Cockpit</title>

<body cz-shortcut-listen="true">
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root">
        <div class="app-container">
            <div class="topbar-container"></div>
            <div class="navi-container">
                <section class="navi-menu"><a>DASHBOARD</a><a>COINS</a></section>
            </div>
            <div class="portfolio-container">
                <p>
                    Lorem

                </p>
            </div>
        </div>
    </div>
</body>

</html>

我想将链接设置为100％高度。我该怎么办？

Answer 1

您可以尝试将navi-container类的高度更新为100％

height: 100%;

希望这行得通！

Answer 2

检查将.navi-container默认height更改为100％是否可行。如果是这样，代码中可能还会存在其他问题。

.navi-container {
    width: 100%;
    height: 100%;
}

Answer 3

问题在于a是内联元素。如果您希望元素具有高度，则应该具有display: inline-block; and height: 100%;。

Answer 4

尝试： .navi-menu a{ height: 100%; ...other CSS styles }

因为它是一个内联块容器，所以您可以定义块的大小属性，但是如果不定义它们，它将根据内容进行调整。标签<a>

中的文本大小很快

在Codepen上工作正常-https://codepen.io/anon/pen/vavEar

如何为标签a设置高度100％？

4 个答案: