我需要构建一个标准的 Web 应用程序，其中包含标题、左侧边栏（如果选项太多则可滚动）和内容大小合适。
这是我的尝试：
.wrapper {
font-size: 14px;
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.layout {
box-sizing: border-box;
display: flex;
height: 100%;
width: 100%;
flex: 0 1 auto;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
}
.header {
display: flex;
height: 100%;
width: 100%;
flex: 0 1 auto;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background-color: grey;
padding: 10px;
}
.content {
display: flex;
height: 100%;
width: 100%;
flex: 0 1 auto;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
}
.content-sidebar-layout {
display: flex;
height: 100%;
width: 100%;
flex: 0 1 auto;
flex-direction: row;
align-items: stretch;
justify-content: flex-start;
overflow: hidden;
}
.sidebar {
display: flex;
padding: 16px;
height: 100%;
width: auto;
flex: 0 1 auto;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
background-color: red;
overflow-y: auto;
}
.pagedata {
display: flex;
padding: 16px;
height: 100%;
width: 100%;
text-wrap: nowrap;
flex: 0 1 auto;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
background-color: blue;
}
<html>
<div class="wrapper">
<div class="layout">
<div class="header">
This is the header
</div>
<div class="content">
<div class="content-sidebar-layout">
<div class="sidebar">
<div>Option 1</div>
<div>Option 2</div>
<div>Option 3</div>
<div>Option 4</div>
</div>
<div class="pagedata">
<p>This is the page data</p>
<p>This is the page data</p>
<p>This is the page data</p>
<p>This is the page data</p>
<p>This is the page data</p>
<p>This is the page data</p>
<p>This is the page data</p>
<p>This is the page data</p>
</div>
</div>
</div>
</div>
</div>
</html>
侧边栏必须固定在左侧。如果选项数量超过可用高度，则滚动条必须垂直滚动。
对于主要内容区域，它必须是可滚动的 X 和 Y，具体取决于内容大小，与侧边栏滚动无关（它们应该是独立的）。
content-sidebar-layout 是页面内容的包装类，因为某些页面没有侧边栏（如登录、错误和其他一些页面）。
如何修复给定的代码以获得所需的行为而不使用 jQuery 或 javascript（纯 CSS/HTML 解决方案）？
有很多帖子描述了高度的各个方面，但我找不到这样的完整布局。
None
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
