Question

我做了以下demo on Codepen。问题是当视口的高度降低时，我想要滚动显示但是徽标隐藏在图标列表下，这是不需要的行为。如果视口高度足够，一切都能正常工作。

<input type="checkbox" id="menu-expander" name="ert">
 <div class="main-menu-container">

<div class="logo-area">
  <div class="logo"><img src="http://extensiondl.maxthon.com/skinpack/11018970/1375652328/icons/icon_32.png"></div>

</div>

<ul class="sidebar-icon-list">
  <li class="sidebar-icon">
    <img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png">
    <span>Week</span>
  </li>
  <li class="sidebar-icon menu-active">
    <img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png">
    <span>Projects</span>
  </li>
  <li class="sidebar-icon" title="Life">
    <img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png">
    <span>Life</span>
  </li>

  <li class="sidebar-icon">
    <img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png">
    <span>Analysis</span>
  </li>
  <li class="sidebar-icon">
    <img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png">
    <span>Projects</span>
  </li>
</ul>

<div class="sidebar-wt">
  <label for="menu-expander"><img src="https://cdn3.iconfinder.com/data/icons/awesome-lineca-vol-1/17/angle-right-128.png"></label>
</div>
<div class="user-area">
  <div class="user-pic"></div>
</div>

CSS

    input[name="ert"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Main Menu Contaier */
.main-menu-container {
  width: 6em;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  background-color: hsl(207,6%,12%);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 100;
  border-right: 1px solid black;
  transition: width 0.2s ease-in;
  overflow-y: auto;
  overflow-x: hidden;
}

input[name="ert"]:checked + .main-menu-container {
  width: 12em;
  transition: width .3s linear;
}


/* Logo Area */
.logo-area {
  height: 6em; 
  background-color: #fff; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 4em;
  width: 4em;
}

.logo img {
  height: 4em; 
  width: 4em;
}

/* Icon List */

.sidebar-icon-list {
  display: flex column;
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}

.sidebar-icon {
  color: #eaeaea;
  width: 100%;
  border-left: 3px solid hsl(207,6%,12%);
  height: 3em;
  margin: 1em 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: all 0.3s linear;
}

.sidebar-icon:hover {
  color: #fff;
  border-left: 3px solid #EEFF22;
}

.sidebar-icon img {
  color: #fff;
  width: 2em;
  height: 2em;
}

.sidebar-icon span {
  font-size: 0.75em;
  opacity: 0;
  position: absolute;
  transition: all 0.1s linear;
}

input[name="ert"]:checked + .main-menu-container .sidebar-icon-list .sidebar-icon {
  flex-direction: row;
  justify-content: flex-start;
  padding-left: 1em;
  transition: all 0.3s linear;
}

input[name="ert"]:checked + .main-menu-container .sidebar-icon-list .sidebar-icon span {
  font-size: 0.75em;
  opacity: 1;
  position: relative;
  transition: all 0.3s linear;
  margin-left: 1em;
}

.menu-active {
  border-left: 3px solid #EEFF22;
  color: #EEFF22;
}

/* Sidebar Expander */

.sidebar-wt {
  display: flex;
  justify-content: flex-end;
}

.sidebar-wt label img {
  height: 1.5em;
  width: 1.5em;
  cursor: pointer;
}

.main-menu-container .sidebar-wt label img {
  transition: all 0.3s linear;
}

input[name="ert"]:checked + .main-menu-container .sidebar-wt label img {
  transform: rotateZ(180deg);
  transition: all 0.3s linear;
}

/* USer Area at Bottom */

.user-area {
  height: 4em;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-pic {
  width: 100%;
  height: 5em;
  border-bottom: 2px solid #2ca58d;
  background-image: url(http://soccer1x2.net/wp-content/uploads/2012/03/leo-messi1.png);
  background-size: cover;
}







.main-menu-container .sidebar-wt label img {
  transition: all 0.3s linear;
}

input[name="ert"]:checked + .main-menu-container .sidebar-wt label img {
  transform: rotateZ(180deg);
  transition: all 0.3s linear;
}

Answer 1

当你降低窗口的高度时，看起来.logo-container的高度正在改变。

如果{。1}}为.logo-area，则高度不会降低。

修复左侧菜单滚动无法正常工作？

1 个答案: