Html 保持侧菜单100%高度

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

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

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

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

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

这里有一个JSFIDLE要演示，单击“添加行”按钮添加输入，直到它们位于视口下方

那么，让菜单保持100%高度的最佳解决方案是什么？

---

喜欢CSS解决方案，但如果需要，JS也可以工作。

添加

位置：固定至
。侧菜单


//只需一个快速函数即可添加更多输入
$（文档）.ready（函数（）{
$（“.add”）。在（“单击”，函数（）{
$（“字段集”）.append（“标签：”）；
});
});
*{
保证金：0；
填充：0
}
身体，
html{
宽度：100%；
身高：100%；
}
字段集{
填充：10px；
}
.副菜单{
宽度：200px；
身高：100%；
背景色：#1c1c；
位置：固定；
排名：0；
左：0；
}
.包装纸{
左边距：200px；
}
输入{
宽度：100%；
最大宽度：400px；
高度：40px；
显示：块；
边缘底部：20px；
颜色：#000；
}

页面标题
标签：
标签：
标签：
添加行
您可以通过多种方式解决此问题

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

这样，您可以分别滚动侧边栏和内容。两者都不会比它们需要的更大。如果边栏变大，它也可以滚动


*{
保证金：0；
填充：0；
}
html，body，.wrapper{
身高：100%；
}
.包装纸{
位置：相对位置；
溢出y：隐藏；
}
.侧边栏{
宽度：100px；
浮动：左；
身高：100%；
溢出y：自动；
背景色：红色；
}
.内容{
宽度：300px；
浮动：左；
身高：100%；
溢出y：自动；
背景颜色：蓝色；
}
.垫片{
高度：1000px；
}

边栏
内容
间隔棒
试试这个