Question

我有一个侧边菜单，我希望保持100％的页面高度。

现在代码基本就是这样：

body,
html {
  width: 100%;
  height: 100%;
}

.sideMenu {
  width: 200px;
  height: 100%;
  float: left;
}

这个问题是侧边菜单高度不会随页面的其余部分延伸。例如，我有可以添加到表单的输入字段，并且当添加了一些输入时，表单扩展到原始视图端口下方。虽然菜单没有。

这是一个展示https://jsfiddle.net/m5yfqdsu/的jsfiddle，点击＆＃34;添加行＆＃34;按钮添加输入，直到它们位于视口下方。

那么将菜单保持在100％高度的最佳解决方案是什么？喜欢CSS解决方案，但如果需要，JS也能正常工作。

Answer 1

将position: fixed;添加到.sideMenu

＆＃13;

// just a quick function to add more inputs

$(document).ready(function() {
  $(".add").on("click", function() {
    $("fieldset").append("<div class='rowContainer'><label>Label:</label><input type='text' /></div>");
  });
});

＆＃13;

* {
  margin: 0;
  padding: 0
}

body,
html {
  width: 100%;
  height: 100%;
}

fieldset {
  padding: 10px;
}

.sideMenu {
  width: 200px;
  height: 100%;
  background-color: #1c1c1c;
  position: fixed;
  top: 0;
  left: 0;
}

.wrapper {
  margin-left: 200px;
}

input {
  width: 100%;
  max-width: 400px;
  height: 40px;
  display: block;
  margin-bottom: 20px;
  color: #000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sideMenu"></div>

<div class="wrapper">

  <h1>Page Title</h1>
  <form>
    <fieldset>

      <div class="rowContainer">
        <label>Label:</label>
        <input type="text" />
      </div>

      <div class="rowContainer">
        <label>Label:</label>
        <input type="text" />
      </div>

      <div class="rowContainer">
        <label>Label:</label>
        <input type="text" />
      </div>

    </fieldset>
  </form>

  <button class="add">Add row</button>
</div>

＆＃13;

Answer 2

您可以通过多种方式解决此问题。

一种方法是使容器具有100％的高度，使其子元素可滚动。这样您就不需要实际的absolute规则，但它确实达到了相同的效果。我不想使用absolute，因为如果您希望它最终能够响应，那就更容易了。

这样，您可以单独滚动侧边栏和内容。两者都不会比他们需要的更大。如果侧边栏增长，它也可以滚动。

＆＃13;

* {
  margin:0;
  padding:0;
}

html, body, .wrapper {
  height:100%;
}

.wrapper {
  position:relative;
  overflow-y:hidden;
}

.sidebar {
  width:100px;
  float:left;
  height:100%;
  overflow-y:auto;
  background-color:red;
}

.content {
  width:300px;
  float:left;
  height:100%;
  overflow-y:auto;
  background-color:blue;
}

.spacer {
  height:1000px;
}

＆＃13;

<div class="wrapper">
  <div class="sidebar">
    sidebar
  </div>

  <div class="content">
    content
    <div class="spacer">
      spacer
    </div>
  </div>
</div>

＆＃13;

保持侧边菜单100％高度

2 个答案: