文章/答案/技术大牛

发布

社区首页 >问答首页 >Materialize CSS -如何让一列有完整的高度？

问Materialize CSS -如何让一列有完整的高度？
EN

Stack Overflow用户

提问于 2021-02-08 17:48:51

回答 2查看 219关注 0票数 0

这是我的代码，我已经开始制作一个简单的菜单，但问题是它不是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>

html

css

materialize

回答 2

Stack Overflow用户

发布于 2021-02-08 18:21:37

向.row类添加margin: 0;。更准确地说，添加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

票数 0

Stack Overflow用户

发布于 2021-02-08 18:24:07

假设你说的是底部的小缝隙。

Row是一个物化类：

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

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

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

它将覆盖materialise margin-bottom:20px。

你会得到100%的高度

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66099231

复制

相似问题

问Materialize CSS -如何让一列有完整的高度？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Materialize CSS -如何让一列有完整的高度？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Materialize CSS -如何让一列有完整的高度？
EN