根据内容调整导航栏的大小

Question

我目前有一个导航侧边栏，其中包含一些内容。 我想根据侧边栏中的内容动态调整其高度。 我曾尝试删除高度选项，但这似乎不起作用。 我真的很难过，需要一些帮助。

这是我的代码。

HTML：

<nav class="main-menu">
    <ul>
        <?php
            if(hasMediaFile(wp_title($sep = '', $display = false, $seplocation = ''),"images.txt")) :
        ?>
        <li>
            <a href="#images">
                <i class="fa fa-picture-o fa-2x"></i>
                <span class="nav-text">
                            Images
                </span>
            </a>
        </li>
        <?php endif; ?>


        <?php
            if(hasMediaFile(wp_title($sep = '', $display = false, $seplocation = ''),"videos.txt")) :
        ?>
        <li class="has-subnav">
            <a href="#videos">
                <i class="fa fa-play fa-2x"></i>
                <span class="nav-text">
                            Videos
                </span>
            </a>
        </li>
        <?php endif; ?>


        <?php
            if(hasMediaFile(wp_title($sep = '', $display = false, $seplocation = ''),"audios.txt")) :
        ?>
        <li class="has-subnav">
            <a href="#audio">
                <i class="fa fa-headphones fa-2x"></i>
                <span class="nav-text">
                            Audios
                </span>
            </a>
        </li>
        <?php endif; ?>

        <?php
            if(hasMediaFile(wp_title($sep = '', $display = false, $seplocation = ''),"gviewdocs.txt")) :
        ?>
        <li class="has-subnav">
            <a href="#documents">
                <i class="fa fa-file-text fa-2x"></i>
                <span class="nav-text">
                            Documents
                </span>
            </a>
        </li>
        <?php endif; ?>

        <?php
            if(hasMediaFile(wp_title($sep = '', $display = false, $seplocation = ''),"snapshots.txt")) :
        ?>
        <li>
            <a href="#websites">
                <i class="fa  fa-link fa-2x"></i>
                <span class="nav-text">
                            Websites
                </span>
            </a>
        </li>
        <?php endif; ?>
    </ul>
</nav>

CSS：

.main-menu:hover,nav.main-menu.expanded {
  width:250px;
  overflow:visible;
}

.main-menu {
  background:#212121;
  position:absolute;
  border-radius: 25px;
  top:50px;
  bottom:0;
  height: 20%;
  left:30px;
  width:60px;
  overflow:hidden;
  -webkit-transition:width .05s linear;
  transition:width .05s linear;
  -webkit-transform:translateZ(0) scale(1,1);
  z-index:1000;
}

.main-menu>ul {
  margin:7px 0;
}

.main-menu li {
  position:relative;
  display:block;
  width:250px;
}

.main-menu li>a {
  position:relative;
  display:table;
  border-collapse:collapse;
  border-spacing:0;
  color:#999;
  font-family: arial;
  font-size: 14px;
  text-decoration:none;
  -webkit-transform:translateZ(0) scale(1,1);
  -webkit-transition:all .1s linear;
  transition:all .1s linear;

}

.main-menu .nav-icon {
  position:relative;
  display:table-cell;
  width:60px;
  height:36px;
  text-align:center;
  vertical-align:middle;
  font-size:18px;
}

.main-menu .nav-text {
  position:relative;
  display:table-cell;
  vertical-align:middle;
  width:190px;
  font-family: 'Titillium Web', sans-serif;
}

这是当前输出的预览：

带三个元素： https://imgur.com/a/yaIYKPq

有五个元素： https://imgur.com/a/7aBhD24

Answer 1

.main-menu的高度更改为fit-content 。

像这样：

.main-menu {
  background:#212121;
  position:absolute;
  border-radius: 25px;
  top:50px;
  bottom:0;
  height: fit-content;
  /* height: 20%; */
  left:30px;
  width:60px;
  overflow:hidden;
  -webkit-transition:width .05s linear;
  transition:width .05s linear;
  -webkit-transform:translateZ(0) scale(1,1);
  z-index:1000;
}

Answer 2

您需要将height CSS 属性设置为fit-content 。更多关于 MDN 上的适合内容。