我有以下代码，有些东西计算的高度太大，我看不到页脚，这导致在不应该滚动的时候滚动。
*注意:我正在使用 reactjs、sass，所以这就是为什么我可能有一些额外的包装器，并且可能有一些 css 是重复的，因为我不得不将它从嵌套中取出。
body,
html {
height: 100%;
margin: 0;
}
.hidden {
display: none !important;
}
ul.sidebar-menu {
padding: 0;
li a {
padding: 10px;
font-size: 1.1em;
display: block;
color: blue;
}
}
nav {
background-color: blue;
color: white;
flex: 0 auto;
height: 100%;
}
header,
footer {
background-color: blue;
color: white;
min-height: 50px;
}
.wrapper {
display: flex;
flex-flow: row wrap;
height: 100vh;
}
header {
flex: 0 0 100%;
}
main {
flex: 2 auto;
display: block;
}
footer {
flex: 1 1 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div class="wrapper">
<header>
header
</header>
<nav>
<ul class="sidebar-menu">
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
</ul>
</nav>
<main>
main
</main>
<footer>footer</footer>
</div>
</div>
</body>
</html>还有我的 ul.sidebar-menu 我如何将滚动添加到这个区域。我想我必须为它设置一个高度？
最佳答案
我在这里尝试了一些东西，当内容太多时应该用滚动条来完成这项工作https://jsfiddle.net/fnvgho41/11/
需要将 nav 和 main 包裹起来，以便轻松管理高度。
body,
html {
height: 100%;
margin: 0;
}
.hidden {
display: none !important;
}
ul.sidebar-menu {
padding: 0;
margin: 0;
li a {
padding: 10px;
font-size: 1.1em;
display: block;
color: blue;
}
}
.body {
flex: 1 1 auto;
display: flex;
flex-direction: row;
}
nav {
background-color: blue;
color: white;
flex: 0 0 100px;
overflow: auto;
max-height: 100%;
}
main {
flex: 1 0 auto;
overflow: auto;
max-height: 100%;
}
header,
footer {
flex: 0 1 auto;
width: 100%;
background-color: blue;
color: white;
min-height: 50px;
}
.wrapper {
display: flex;
flex-flow: nowrap;
flex-direction: column;
height: 100vh;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div class="wrapper">
<header>
header
</header>
<div class="body">
<nav>
<ul class="sidebar-menu">
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
</ul>
</nav>
<main>
main
</main>
</div>
<footer>footer</footer>
</div>
</div>
</body>
</html>关于html - 什么导致页面滚动，当不需要时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49825922/