Question

我有一个嵌套在紫色div中的无序列表。我只希望div中（或顶部）的部分可见，我希望能够滚动查看其余部分。我已经在早期的项目中完成了这项工作。

http://codepen.io/tyl-er/pen/ALAyjq（输入搜索以查看示例）

我尝试使用“overflow：hidden;”但那不起作用。

    <!--<span class="glyphicons glyphicons-wifi-alt"></span>
live icon

<span class="glyphicons glyphicons-moon"></span>
not live icon-->

<body>
    <div class="box">
        <header>
            <div class="nav">
                <ul>
                    <li class="favs"><a href="#fav">Favs</a></li>
                    <li class="online"><a href="#on">Online</a></li>
                    <li class="offline"><a href="#off">Offline</a></li>
                </ul>
            </div>
        </header>
        <div class="list">
            <ul>
                <li>streamerhouse</li>
                <li>freecodecamp</li>
                <li>OgamingSC2</li>
                <li>brunofin</li>
                <li>cretetion</li>
                <li>ESL_SC2</li>
                <li>storbeck</li>
                <li>comster404</li>
                <li>habathcx</li>
                <li>RobotCaleb</li>
                <li>noobs2ninjas</li>
            </ul>
        </div>
        <div class="output"></div>
    </div>
    <div class="divN"></div>
</body>

/*Colors
#6441A4 (navbar, footer, highlight)
#392E5C
#17141F(background)*/
* {
    color: white
}

body {
    height: 100%;
    width: 100%;
    background: #17141f;
}

.box {
    height: 80%;
    width: 360px;
    background: #392E5C;    
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.nav ul {
    width: 360px;
    margin: 0;
    padding: 0;
    background: #6441A4;
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
  text-align: center;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .5s background-color;
}

.nav a:hover {
  background-color: #005f5f;
}

.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}

@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }

  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }

 a {
    color: white;
  }
  a:hover {
    color: white;
  }

    .list ul {
        padding: 8px;
        overflow: hidden;
        overflow-y: scroll;
        position: relative;
        background: 
    }

    .list li {
        width: 360px;
        height: 50px;

    }

这是项目网址 http://codepen.io/tyl-er/pen/NRPkaV?editors=1100

Answer 1

您应该为父div命名列表提供修复高度。试试这个

.list{
    height: 346px;
    overflow-y: scroll;
    overflow-x: hidden;
}

Answer 2

只需将您的代码更改为此即可完成

.list {
    overflow-y: auto;
    height: calc(100% - 50px);
}
.list ul {
    padding: 8px;
    overflow: hidden;
    position: relative;
    background:
}

无法隐藏嵌套在div中的列表的溢出。

2 个答案: