Materialize CSS - 如何使列具有全高？答案

【问题标题】：Materialize CSS - How to make a column have full height?Materialize CSS - 如何使列具有全高？
【发布时间】：2021-02-08 09:48:51
【问题描述】：

这是我的代码，我已经开始制作一个简单的菜单，但问题是它不是 100% 的高度。我尝试了许多在类似帖子中看到的解决方案，但没有一个有帮助。我尝试过设置最小高度、在 % 和 vh 之间进行更改等等，但都没有奏效。

M.AutoInit()

let sideMenu=document.getElementById("sideMenu")

sideMenu.addEventListener("mouseenter",()=>{
    sideMenu.setAttribute("class", "col s12 m12 l12 side-menu")
})

sideMenu.addEventListener("mouseleave",()=>{
    sideMenu.setAttribute("class", "col s2 m2 l2 side-menu")
})

.side-menu{
    background-color: #b9ffc8;
    height: 100% !important;
    transition:ease-in-out .3s;
}

.side-menu:hover{
    background-color: #5eff81;
}

.side-menu-wrapper{
    height: 100% !important;
}

.row {
    height: 100vh !important;
}

.menu-icon{
    color:darkgrey;
    transition: ease-in-out .3s;
}

.side-menu:hover .menu-icon{
    color:white;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="row">
        <div class="col s3 m2 l2 side-menu-wrapper">
            <div class="row">
                <div class="col s2 m2 l2 side-menu" id="sideMenu">
                    <i class="small material-icons menu-icon">dehaze</i>
                </div>
            </div>
        </div>
    </div>
    <script src="index.js"></script>
</body>

</html>

【问题讨论】：

我在下面回答了你的问题，但如果你查看 Chrome 开发工具 developers.google.com/web/tools/chrome-devtools，你很快就能自己发现这些东西。

标签： html css materialize

【解决方案1】：

将margin: 0; 添加到.row 类。更准确地说，添加margin-bottom: 0;。

您还可以从height 中删除所有!important。

.side-menu {
  background-color: #b9ffc8;
  height: 100%;
  transition: ease-in-out 0.3s;
}

.side-menu:hover {
  background-color: #5eff81;
}

.side-menu-wrapper {
  height: 100%;
}

.row {
  height: 100vh;
  margin-bottom: 0;
}

.menu-icon {
  color: darkgrey;
  transition: ease-in-out 0.3s;
}

.side-menu:hover .menu-icon {
  color: white;
}

在 codepen 上查看它的实际效果：https://codepen.io/manaskhandelwal1/pen/rNWLVLg

【讨论】：

【解决方案2】：

假设您在谈论底部的小间隙。

Row 是一个 Materialize 类：

.row {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px
}

因此，如果您将行类更改为：

.row {
  height: 100vh !important;
  margin-bottom:0px !important
}

它将覆盖物化margin-bottom:20px。

你会得到 100% 的高度

【讨论】：