问题描述
我正在尝试制作一个具有以下设计的网页：
一切看起来不错，但是，如果右侧的内容溢出页面，而我必须向下滚动，则左侧菜单栏（“ second_navbar”）不会延伸到页面末尾。
我尝试将“位置”更改为绝对值，并添加“底部”属性等于0，但没有成功。
在滚动后如何拉伸到页面底部时，如何使左侧导航栏粘贴到顶部导航栏？
提前感谢您的回答！
编辑：我在左侧添加了内容，如果您最小化窗口并向下滚动以查看文本，则问题很明显
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
html {
min-height: 100%;
}
body {
background-color: rgb(225,225,225);
}
#header {
position: relative;
background-color: white;
text-align: center;
border-color: rgb(93,87,0.5);
color: rgb(93,87);
border-bottom-style: solid;
border-width: 1px;
}
p {
margin-top: 0;
padding: 5px;
font-size: 48px;
}
#navbar {
position: relative;
font-weight: bold;
color: rgb(93,87);
padding: 5px;
align-items: center;
background-color: white;
display: flex;
align-items: center;
justify-content: space-around;
}
#navbar li {
width: 160px;
font-size: 24px;
text-align: center;
text-decoration: none;
list-style: none;
}
#second__navbar {
width: 25%;
height: 100%;
position: fixed;
background-color: white;
text-decoration: none;
list-style: none;
}
#second__navbar li{
display: block;
font-size: 20px;
margin: 15% 0 0 15%;
}<body>
<div id="header">
<p>My Name</p>
</div>
<div >
<ul id="navbar">
<li>TITLE</li>
<li>TITLE</li>
<li>TITLE</li>
<li>TITLE</li>
</ul>
</div>
<div>
<ul id="second__navbar">
<li>SUBTITLE</li>
<li>SUBTITLE</li>
<li>SUBTITLE</li>
<li>SUBTITLE</li>
</ul>
</div>
<div style="padding-left:50%; margin: 20% 20% 20% 20%">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkNown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>解决方法
我使用display: flex并重新安排了一些容器div以获取您想要的内容（我认为！）。看一下A Complete Guide to Flexbox，了解如何使用flex。通常，我使用flex来安排容器元素，但不要将flex用于页面的较小元素（如文本段落）。我还需要将height: 100%添加到html。与您的浏览器开发人员工具非常友好，以查看哪些元素未按您期望的方式排列。
html {
height: 100%;
}
body {
margin: 0;
background-color: rgb(225,225,225);
display: flex;
flex-direction: column;
min-height: 100%;
}
#header {
position: relative;
background-color: white;
text-align: center;
border-color: rgb(93,87,0.5);
color: rgb(93,87);
border-bottom-style: solid;
border-width: 1px;
}
p {
margin-top: 0;
padding: 5px;
font-size: 48px;
}
#navbar {
margin: 0;
position: relative;
font-weight: bold;
color: rgb(93,87);
padding: 5px;
align-items: center;
background-color: white;
display: flex;
align-items: center;
justify-content: space-around;
}
#navbar li {
width: 160px;
font-size: 24px;
text-align: center;
text-decoration: none;
list-style: none;
}
.content-wrap {
flex: 1;
display: flex;
flex-direction: row;
}
#second__navbar {
background-color: white;
text-decoration: none;
list-style: none;
padding: 0;
margin: 0;
}
#second__navbar li {
display: block;
font-size: 20px;
margin: 10px 0;
}
.content {
margin: 1em;
}<!DOCTYPE html>
<html>
<body>
<div id="header">
My Name
</div>
<div>
<ul id="navbar">
<li>TITLE</li>
<li>TITLE</li>
<li>TITLE</li>
<li>TITLE</li>
</ul>
</div>
<div class="content-wrap">
<ul id="second__navbar">
<li>SUBTITLE</li>
<li>SUBTITLE</li>
<li>SUBTITLE</li>
<li>SUBTITLE</li>
</ul>
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</body>
</html>