Question

我有一个website，我想要一个标题和一个侧边栏。

我的预期功能是侧边栏延伸到页面底部。但是，它的内容超出了视口，我猜测是因为.menu的大小是整个容器容器的100％，但由于标题而被推下。

如何使菜单仅沿视口一直延伸？

<body>
<div class="container-fluid">
    <header class='row'>
        <div class="col-md-1">
            <a href="#" class="menu-icon-link">
                <i class="glyphicon glyphicon-list"></i>
            </a>
        </div>
        <div class="input-group col-md-4 col-md-offset-4">
          <input type="text" class="form-control" placeholder="Search for...">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
          </span>
        </div>
    </header>

    <div class="row menu-container">
        <div class="menu col-md-2">
            Lorem ipsum...
        </div>
    </div>
</div>
</body>

我的CSS：

html, body{ 
  height: 100%; 
  margin: 0; 
  padding: 0;
}

body {
  position: relative; 
  padding: 3.5em 0 0 0; 
  box-sizing: border-box;
}

.menu-container {
  display: block;
}

.menu {
  position: fixed;
  top: 3.5em;
  padding: 1em;
  background: #A9E2AD;
  height: 100%;
  overflow-y: scroll;
}

.glyphicon-list {
    font-size: 1.5em;
    color: #FFF;
} 

header {
    background: #50af4c;
    color: #fff;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 0.5em 1em;
    display: block;
}

Answer 1

您不需要使用显式高度，您可以根据需要使用定位。

.menu {
  position: fixed;
  top: 3.5em;
  bottom: 0; //add this
  padding: 1em;
  background: #A9E2AD;
  //height: 100%;
  overflow-y: scroll;
}

边栏正在延伸到视口之外

1 个答案: