设置菜单内容高度

原创于 2019-12-05 10:03:39 发布 · 286 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#菜单 #absolute #position #高度

本文介绍了如何通过CSS来设置菜单内容的高度，分别展示了未限制高度和限制高度后的菜单效果，提供了相应的代码示例和实际效果图。

未限制高度的菜单css代码及效果图：

.SellTabGoods
  display flex
  overflow hidden
  .menu
    flex 0 0 80px
   	  //忽略部分css
    .menu-item
      display table
      //忽略部分css
  .content
    flex 1 1
    padding 0 18px
    //忽略部分css

在这里插入图片描述

限制高度后的css及效果图：

.SellTabGoods
  position absolute
  display flex
  top 250px
  bottom 100px
  overflow hidden
  .menu
    flex 0 0 80px
   	  //忽略部分css
    .menu-item
      display table
      //忽略部分css
  .content
    flex 1 1
    padding 0 18px
    //忽略部分css