Question

以下是JSBIN

的链接

modules是100％高度的固定容器。我正在尝试获取列表项以滚动保持search容器中的wrapper div固定，以便始终可见搜索。尝试仅使用CSS执行此操作。

  <div class="modules">
    <div class="wrapper">
      <div class="search">
        <input type="text" placeholder="search" />
      </div>
      <div class="items-container">
        <ul>
          <li>Stuff First</li>
          <li>Stuff Last</li>
        </ul>
      </div>
    </div>
  </div>


.modules {
  position: fixed;
  right: 0;
  top: 90px;
  bottom: 0px;
  width: 240px;
  height: 100%;
  background: #fff;
  border: 1px solid #eee;
}

.search{
  border: 1px solid #eee;
  box-shadow: 0 1px 1px rgba(0,0,0,.25);
  padding: 5px;
}

.items-container{
  overflow: auto;
}

Answer 1

我会添加这样的东西：

#items-container ul { 
    height: 195px;
    overflow-y: scroll;
    width: 100%; 
}

请参阅：http://jsbin.com/tucakikutica/2/edit

Answer 2

在分配css类“items-container”时出现拼写错误... 同时给项目容器一些特定的高度

   .items-container{
      overflow: auto;  
      height:400px;
    }

Answer 3

您必须将position:fixed应用于输入搜索：

.search{
  border: 1px solid #eee;
  box-shadow: 0 1px 1px rgba(0,0,0,.25);
  padding: 5px;
  position: fixed;
  width: 100%;
  background: #fff;
  z-index: 100;
}

fiddle

另一个版本：

<强> CSS

.modules {
  position: relative;
  right: 0;
  bottom: 0px;
  z-index: 15;
  width: 240px;
  background: #fff;
  border: 1px solid #eee;
  /*overflow: scroll;*/
}

.search{
  border: 1px solid #eee;
  box-shadow: 0 1px 1px rgba(0,0,0,.25);
  padding: 5px;
  position: fixed;
  background: #fff;
  z-index: 100;
}

.items-container{
  padding-top: 40px;
}

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

li{
  padding: 3px 5px;
}
li:hover{
  background: #f6f6f6;
}
*{
    margin:0;
    padding:0;
}

fiddle

你也有一个拼写错误<div clas="items-container">。 class不是clas。

CSS：固定父级内部div中的滚动条

3 个答案: