Question

我有一个学校项目，除了最后一件事，我或多或少都做了。我搜索了stackoverflow和谷歌搜索时发现的各种网站有很多答案，我试过但没有运气。

我想让导航栏与我身体的高度相匹配。我试过身高：100％;和最小高度：100％;当我将高度设置为正确的身体当前高度时，它可以工作： body = 530.88px但身高：继承;不起作用。

#nav_bar {
height: 530.88px;
}

但我希望浏览器窗口具有自适应高度。

CSS - 代码段

#body_wrap {
    border: 1px solid;
    border-radius: 20px;
    min-width: 100%;
    min-height: 100%;
}
#nav_bar {  
    display: block;
    width: 20%;
    height: 100%;
    overflow: auto;
    float: left;
    background-color: black;
    border-radius: 20px 0px 0px 20px;
}

#nav_bar_logo {
    margin-top: 20px;
    display: block; 
}
#nav_bar_logo img {
     display: block;
     max-height: 90%;
     max-width: 90%;
     margin-left: auto;
     margin-right: auto;
}

完整HTML：https://hastebin.com/bipecofowe.xml
完整的CSS：https://hastebin.com/edepohigoh.css

Answer 1

如果您想将导航高度设置为涵盖整个body（页面），您可以这样做：

body,html{ min-height: 100%; height: 100%;}

但如果您希望将导航高度动态设置为body的高度，您可以使用一些jQuery和js：

＆＃13;

$(function(){
  // Get body height
  var bodyHeight = $('body').height()

  $('nav').css({
    'height' : bodyHeight,
  });
})

＆＃13;

nav{
  background-color: red;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>

  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>

</nav>

＆＃13;

此外，如果您的身体具有当前视口的全高，则可以执行以下操作：

#nav_bar { height: 100vh }

HTML / CSS - 使导航栏高度匹配正文

1 个答案: