html - 保持侧边菜单 100% 高度

Question

我有一个侧面菜单，我想将其保持在 100% 的页面高度。

现在的代码基本上是这样的:

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

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

问题是侧面菜单的高度不会随页面的其余部分一起延伸。例如，我有可以添加到表单的输入字段，当添加了一些输入后，表单会扩展到原始视口(viewport)下方。而菜单没有。

这是一个 jsfiddle 来演示 https://jsfiddle.net/m5yfqdsu/ ，单击“添加行”按钮添加输入，直到它们位于视口(viewport)下方。

那么将菜单保持在 100% 高度的最佳解决方案是什么？首选 CSS 解决方案，但如果需要，JS 也可以。

Answer 1

添加position: fixed;到.sideMenu

// 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>");
  });
});

* {
  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;
}

<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>