我的网页左侧有一个垂直固定div，目的是作为侧边菜单，主要内容显示在右侧。左侧菜单包含一个无序列表，其中可能包含许多项目，因此，当所有项目无法一次显示时（例如，浏览器窗口太小），无序列表部分将自动生成相应的滚动条（不是整个固定的）左菜单div）。
我无法达到预期的效果，也不明白为什么我的代码不起作用，因为我对HTML和CSS相当新。感谢您的帮助。
https://jsfiddle.net/afe102mt/
* {
margin: 0;
padding: 0;
}
ul > li + li {
border-top: 1px solid #cc2900;
}
li a {
color: #000;
display: block;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
ul {
background-color: #b32400;
font-family: Arial;
list-style-type: none;
overflow: auto;
position: absolute;
width: 100%;
}
#leftMenu {
background-color: #cc2900;
height: 100%;
overflow: hidden;
position: fixed;
width: 200px;
}
#pageContent {
margin-left: 200px;
padding: 2% 3%;
position: absolute;
}
#title {
font-family: Arial;
font-size: 36px;
padding: 12px;
text-align: center;
}<div id="leftMenu">
<div id="title">Menu title</div>
<ul>
<li><a href="#menuItem1">Menu item 1</a></li>
<li><a href="#menuItem2">Menu item 2</a></li>
<li><a href="#menuItem3">Menu item 3</a></li>
<li><a href="#menuItem4">Menu item 4</a></li>
<li><a href="#menuItem5">Menu item 5</a></li>
<li><a href="#menuItem6">Menu item 6</a></li>
<li><a href="#menuItem7">Menu item 7</a></li>
<li><a href="#menuItem8">Menu item 8</a></li>
<li><a href="#menuItem9">Menu item 9</a></li>
<li><a href="#menuItem10">Menu item 10</a></li>
<li><a href="#menuItem11">Menu item 11</a></li>
<li><a href="#menuItem12">Menu item 12</a></li>
</ul>
</div>
<div id="pageContent">
<h1>Page title goes here</h1>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mollis venenatis magna vitae rutrum. Aliquam cursus orci ac congue ultricies. Sed nec tempus est. Cras vitae efficitur arcu, eget pulvinar nibh. Vivamus gravida iaculis elit vitae consectetur.
Aliquam efficitur diam quis rutrum semper. Donec pharetra lacus a tempus lobortis. Ut sit amet ex id nisl sagittis faucibus. Curabitur sed lorem leo.</p>
<br />
<p>Phasellus mollis placerat quam eget rutrum. Suspendisse odio nulla, rutrum id mi ac, elementum vehicula nisi. Nam pretium dignissim nunc ac efficitur. Mauris semper nunc eu ligula porta luctus. Quisque pellentesque dignissim fringilla. Morbi tincidunt
mi quis luctus blandit. Quisque erat dui, vehicula quis porttitor eu, fringilla id erat. Curabitur dapibus dolor et eros fringilla, at mattis metus placerat. In vitae mauris quis eros fringilla rhoncus et et enim. Nunc vestibulum blandit tortor ut
auctor. Praesent nisi ipsum, posuere et aliquet a, iaculis vel orci. Integer erat tortor, vehicula ut eros quis, condimentum volutpat sapien. Pellentesque id neque vitae sem condimentum dictum. Sed tristique sapien purus, quis iaculis turpis dictum
vel.
</p>
<br />
<p>Donec sed eros quis mi sagittis varius eget a orci. Nullam sollicitudin sem massa. In laoreet eros eget nulla rutrum, quis sollicitudin tortor mollis. Nulla facilisi. Donec hendrerit tortor vel metus mollis pellentesque. Nulla egestas sagittis rutrum.
Nulla maximus aliquam magna ullamcorper viverra. Proin molestie mattis tortor eu consequat. Sed eu dolor eget diam vehicula pulvinar ac tempus nisl. Aenean urna sapien, viverra vel arcu at, aliquam fringilla elit.</p>
<br />
<p>Nunc tempor enim nec dolor elementum, sed pulvinar lacus accumsan. Pellentesque eu magna et urna tincidunt scelerisque. In eu finibus quam. Praesent egestas, ipsum ac efficitur dictum, tortor urna aliquet augue, nec elementum mi elit sit amet enim.
Nunc sodales, libero eget convallis fringilla, mi eros bibendum mauris, sit amet eleifend lectus nibh sit amet lectus. Etiam vitae consequat ipsum. Nulla semper, orci quis fermentum gravida, sem neque ultrices tellus, non fringilla augue ex quis augue.
Aenean vestibulum bibendum diam, at blandit elit cursus.</p>
<br />
<p>Praesent bibendum, ligula maximus egestas ullamcorper, felis elit feugiat augue, in pulvinar nulla erat a odio. Vivamus massa enim, mollis et tincidunt eget, faucibus non ex. Suspendisse id tortor ac risus pharetra ultricies. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Praesent in nunc a est rhoncus fermentum. Suspendisse id feugiat ligula, vel ultrices arcu. Aenean a dolor neque. In hac habitasse platea dictumst.</p>
<br />
<p>Vivamus interdum non metus a vulputate. Donec consequat lacus rutrum lectus facilisis pharetra in ac est. Nulla sed massa velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet lacus id libero
volutpat fringilla non quis mauris. Morbi viverra mi nec tortor molestie congue. Pellentesque eu sem orci. Sed mattis interdum orci ut ultrices. Vivamus metus nisl, eleifend vitae dapibus venenatis, sagittis at elit.</p>
<br />
<p>Integer quis purus maximus, commodo nisi sit amet, ultrices quam. Vivamus vitae elementum tellus, sed ultrices quam. Phasellus tempor risus id sollicitudin accumsan. Etiam sagittis fringilla consectetur. Aenean non dui sapien. Mauris vitae pulvinar
quam, nec efficitur mauris. Quisque at laoreet justo, at maximus felis. Morbi orci justo, convallis et nisi eget, semper efficitur purus. Phasellus sed porttitor ex. Quisque eget aliquet felis. Quisque ac neque nunc. Etiam sit amet libero orci. Praesent
mattis fringilla metus, vel pretium odio. Cras quam turpis, luctus ut sagittis eget, placerat pretium odio. Proin sit amet tempus tellus, in bibendum elit.</p>
<br />
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Pellentesque pulvinar massa velit, vel rhoncus leo iaculis vel. Vestibulum vestibulum sagittis tellus, eget viverra magna aliquet id. Donec tincidunt
commodo elit, et sollicitudin tellus placerat ullamcorper. Aenean non aliquet urna. Nam tellus velit, ornare eu egestas laoreet, lobortis sit amet felis. Curabitur pulvinar pretium libero, eu blandit tortor dictum a. Aliquam mollis nisi a metus facilisis
euismod.
</p>
<br />
<p>Maecenas consectetur vulputate enim non fringilla. Vestibulum a vulputate mi, et aliquet orci. Mauris orci ipsum, interdum malesuada tincidunt eget, auctor lobortis felis. Quisque sed augue sapien. Morbi pretium vitae lacus sit amet feugiat. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed porttitor id ipsum vel condimentum. Praesent porta mattis odio. Vestibulum interdum pellentesque consectetur. Pellentesque vestibulum tellus a erat tempor finibus.</p>
<br />
<p>Etiam placerat nisl sit amet ex aliquam, mattis auctor mauris cursus. Mauris feugiat hendrerit suscipit. Curabitur eget condimentum erat. Maecenas auctor ornare orci tincidunt blandit. Etiam non accumsan arcu. Praesent finibus, risus a porttitor sollicitudin,
felis magna porttitor sem, vitae pretium nunc mi a lectus. Integer auctor auctor felis et posuere.</p>
<br />
<p>Ut elementum orci a augue aliquam dapibus. Morbi porta fringilla enim et pulvinar. Praesent sed condimentum enim. Nunc in lacus vitae purus lobortis placerat eu sit amet sem. Curabitur vitae sem commodo, volutpat lorem eu, placerat lacus. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac consectetur lorem. Integer nec felis nibh. Etiam ornare luctus justo, in gravida leo. Quisque facilisis risus
erat, non pulvinar lacus maximus non.</p>
<br />
<p>Vestibulum ornare a purus vel aliquet. Suspendisse a gravida dui. Fusce blandit, tellus molestie dignissim aliquam, dui ligula efficitur nunc, maximus molestie neque magna eu arcu. Maecenas convallis ipsum quis dapibus feugiat. Suspendisse vehicula
consequat molestie. Aliquam venenatis lacus a nunc vestibulum, sed viverra leo fermentum. Nullam accumsan quam vel dolor auctor ultrices. Vivamus id neque et orci rutrum pharetra quis vel orci.</p>
<br />
<p>Phasellus et sapien nec eros consequat vulputate. Cras tempor pellentesque fermentum. Sed mattis ipsum sit amet mauris molestie, ac iaculis ligula bibendum. Morbi vitae condimentum nibh. Duis at urna nisi. Phasellus lacinia dolor mi, id euismod mauris
tempor vel. In ac enim vulputate, egestas magna vitae, porta tortor. Cras pellentesque sapien ac nunc mattis, id laoreet ex pellentesque. Phasellus vel libero eget nisi gravida pharetra sit amet vitae mi. Maecenas a felis vitae mauris interdum blandit
in nec justo. Integer placerat elit quis orci pellentesque efficitur nec faucibus metus. Ut fermentum arcu et nisl vehicula</p>
<br />
<p>Nulla finibus ante in convallis iaculis. Donec ac vulputate nulla. Aliquam venenatis sem et turpis fermentum, vel iaculis ex fermentum. Mauris blandit, odio vitae ultricies bibendum, ligula justo imperdiet nisi, vel rhoncus leo felis ac sem. Vivamus
id egestas purus, sed mattis diam. Mauris cursus eget augue nec pretium. Integer mollis, nisl quis lobortis facilisis, libero dui pulvinar urna, quis fermentum massa nulla vel felis. Vivamus blandit facilisis tortor non dictum. Phasellus dapibus sapien
ultricies sodales aliquam. Fusce ac dui posuere, varius magna et, faucibus justo. Nulla accumsan nunc elementum sollicitudin malesuada.</p>
<br />
<p>Suspendisse tristique, mauris at auctor bibendum, ante massa interdum erat, et scelerisque ipsum metus vel odio. Sed malesuada, augue ac volutpat ullamcorper, turpis ipsum consequat mi, sed pharetra dui est sed tellus. Suspendisse potenti. Curabitur
mollis, enim condimentum tempus sagittis, ligula ex dapibus purus, ac cursus lacus diam quis erat. Nulla et mi a lacus semper gravida. Aliquam libero orci, efficitur nec luctus quis, sagittis sit amet tortor. Donec ac ligula quis elit dignissim venenatis.
Duis ut arcu auctor lorem molestie tristique vitae id orci. Praesent venenatis turpis in tortor viverra dignissim. Sed at blandit neque. Pellentesque nisi ipsum, aliquam in leo ut, commodo iaculis leo. Praesent sodales tristique tellus eget tempor.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</p>
<br />
<p>Nulla sit amet enim euismod, rhoncus purus elementum, venenatis libero. Pellentesque vitae eros sit amet purus tincidunt pharetra vitae ac enim. Phasellus nisi odio, vulputate sed posuere nec, consequat et lacus. Suspendisse in tortor a nulla pellentesque
consectetur in eu lorem. Etiam elit turpis, sagittis id sapien et, tempor facilisis leo. Donec malesuada nibh quis sollicitudin mattis. Curabitur cursus massa faucibus leo molestie cursus. Etiam dictum ultricies tortor eu vestibulum. Donec tincidunt
nunc in tortor luctus, at varius erat dignissim.</p>
<br />
<p>Ut porta eros at nibh ultrices, aliquet imperdiet nisi tempus. Nulla lobortis nec massa vel rhoncus. Proin posuere quam nec nulla viverra hendrerit. Donec eget ex non nisi faucibus finibus. Ut porta sollicitudin ante a convallis. Pellentesque eleifend
elementum malesuada. Aliquam erat volutpat. Aliquam risus lacus, placerat vitae velit non, convallis venenatis diam. Suspendisse non neque sem. Nam ultricies nisi tincidunt nisl tristique interdum. Aliquam erat volutpat. Donec nunc purus, luctus sed
mi ac, fringilla efficitur sapien. Nunc lacinia rutrum est suscipit molestie. Cras tempus velit quam, euismod venenatis eros gravida.</p>
<br />
<p>Donec purus augue, cursus vel suscipit eget, cursus eu tortor. Pellentesque sit amet libero justo. Nulla tempus urna nisl, a consectetur tellus ultricies at. Vivamus eget viverra est. Sed facilisis, libero quis varius scelerisque, odio mi volutpat nisi,
finibus ullamcorper ex nibh euismod ante. Aenean quis elit felis. Aenean tincidunt scelerisque neque nec porta. Morbi vitae justo a leo sagittis ultricies. Sed sed arcu nulla. Duis consequat metus in placerat convallis. Cras rutrum pretium est sed
malesuada. In id erat vestibulum, imperdiet enim placerat, eleifend felis. Cras egestas erat a mauris ultricies rhoncus. Curabitur blandit porta vulputate. In lobortis porttitor velit.</p>
</div>
答案 0 :(得分：0)
只需更改左侧菜单的溢出属性
即可
#leftMenu {
background-color: #cc2900;
height: 100%;
overflow: scroll;
position: fixed;
width: 200px;
}
答案 1 :(得分：0)
试试这个，
* {
margin: 0;
padding: 0;
}
ul > li + li {
border-top: 1px solid #cc2900;
}
li a {
color: #000;
display: inline-block;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
#title {
font-family: Arial;
font-size: 36px;
padding: 12px;
text-align: center;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
ul {
background-color: #b32400;
font-family: Arial;
list-style: none;
overflow-y:scroll;
position: absolute;
margin:0;
padding:0;
width: 200px;
height:100%;
}
#leftMenu {
background-color: #cc2900;
height: 100%;
position: fixed;
width: 200px;
}
#pageContent {
margin-left: 200px;
padding: 2% 3%;
position: absolute;
}
P.S：用此替换整个CSS。 如果有效，请告诉我。
重新后：
ul {
background-color: #b32400;
font-family: Arial;
list-style: none;
overflow-y:auto;
position: absolute;
width: 200px;
max-height:100%;
}
#leftMenu {
background-color: #cc2900;
height:100%;
position: fixed;
width: 200px;
}
答案 2 :(得分：0)
我用两种方式工作，使用flex或calc作为高度。 当我必须解释它为什么不适合你以及为什么它现在起作用时我会说将ul位置设置为绝对使得它对页面高度变化没有反应，因为它没有高度。当它具有相对高度设置时，它开始响应。 Flex使得它占据完整的剩余高度，并且calc允许减去菜单标题高度，因此它需要剩余的高度。
使用flex（更改在#leftMenu和ul中）：
* {
margin: 0;
padding: 0;
}
ul > li + li {
border-top: 1px solid #cc2900;
}
li a {
color: #000;
display: block;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
ul {
background-color: #b32400;
font-family: Arial;
list-style-type: none;
overflow: auto;
width: 100%;
height: 100%;
}
#leftMenu {
background-color: #cc2900;
height: 100%;
overflow: hidden;
position: fixed;
width: 200px;
display: flex;
flex-direction: column;
}
#pageContent {
margin-left: 200px;
padding: 2% 3%;
position: absolute;
}
#title {
font-family: Arial;
font-size: 36px;
padding: 12px;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<script src="index.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="leftMenu">
<div id="title">Menu title</div>
<ul>
<li><a href="#menuItem1">Menu item 1</a></li>
<li><a href="#menuItem2">Menu item 2</a></li>
<li><a href="#menuItem3">Menu item 3</a></li>
<li><a href="#menuItem4">Menu item 4</a></li>
<li><a href="#menuItem5">Menu item 5</a></li>
<li><a href="#menuItem6">Menu item 6</a></li>
<li><a href="#menuItem7">Menu item 7</a></li>
<li><a href="#menuItem8">Menu item 8</a></li>
<li><a href="#menuItem9">Menu item 9</a></li>
<li><a href="#menuItem10">Menu item 10</a></li>
<li><a href="#menuItem11">Menu item 11</a></li>
<li><a href="#menuItem12">Menu item 12</a></li>
</ul>
</div>
<div id="pageContent">
<h1>Page title goes here</h1>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mollis venenatis magna vitae rutrum. Aliquam cursus orci ac congue ultricies. Sed nec tempus est. Cras vitae efficitur arcu, eget pulvinar nibh. Vivamus gravida iaculis elit vitae consectetur.
Aliquam efficitur diam quis rutrum semper. Donec pharetra lacus a tempus lobortis. Ut sit amet ex id nisl sagittis faucibus. Curabitur sed lorem leo.</p>
<br />
<p>Phasellus mollis placerat quam eget rutrum. Suspendisse odio nulla, rutrum id mi ac, elementum vehicula nisi. Nam pretium dignissim nunc ac efficitur. Mauris semper nunc eu ligula porta luctus. Quisque pellentesque dignissim fringilla. Morbi tincidunt
mi quis luctus blandit. Quisque erat dui, vehicula quis porttitor eu, fringilla id erat. Curabitur dapibus dolor et eros fringilla, at mattis metus placerat. In vitae mauris quis eros fringilla rhoncus et et enim. Nunc vestibulum blandit tortor ut
auctor. Praesent nisi ipsum, posuere et aliquet a, iaculis vel orci. Integer erat tortor, vehicula ut eros quis, condimentum volutpat sapien. Pellentesque id neque vitae sem condimentum dictum. Sed tristique sapien purus, quis iaculis turpis dictum
vel.
</p>
</div>
</body>
</html>
使用calc（更改为ul）： 我计算ul的100％高度并减去66px的菜单标题高度
* {
margin: 0;
padding: 0;
}
ul > li + li {
border-top: 1px solid #cc2900;
}
li a {
color: #000;
display: block;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
ul {
background-color: #b32400;
font-family: Arial;
list-style-type: none;
overflow: auto;
width: 100%;
height: calc(100% - 66px);
}
#leftMenu {
background-color: #cc2900;
height: 100%;
overflow: hidden;
position: fixed;
width: 200px;
}
#pageContent {
margin-left: 200px;
padding: 2% 3%;
position: absolute;
}
#title {
font-family: Arial;
font-size: 36px;
padding: 12px;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<script src="index.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="leftMenu">
<div id="title">Menu title</div>
<ul>
<li><a href="#menuItem1">Menu item 1</a></li>
<li><a href="#menuItem2">Menu item 2</a></li>
<li><a href="#menuItem3">Menu item 3</a></li>
<li><a href="#menuItem4">Menu item 4</a></li>
<li><a href="#menuItem5">Menu item 5</a></li>
<li><a href="#menuItem6">Menu item 6</a></li>
<li><a href="#menuItem7">Menu item 7</a></li>
<li><a href="#menuItem8">Menu item 8</a></li>
<li><a href="#menuItem9">Menu item 9</a></li>
<li><a href="#menuItem10">Menu item 10</a></li>
<li><a href="#menuItem11">Menu item 11</a></li>
<li><a href="#menuItem12">Menu item 12</a></li>
</ul>
</div>
<div id="pageContent">
<h1>Page title goes here</h1>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mollis venenatis magna vitae rutrum. Aliquam cursus orci ac congue ultricies. Sed nec tempus est. Cras vitae efficitur arcu, eget pulvinar nibh. Vivamus gravida iaculis elit vitae consectetur.
Aliquam efficitur diam quis rutrum semper. Donec pharetra lacus a tempus lobortis. Ut sit amet ex id nisl sagittis faucibus. Curabitur sed lorem leo.</p>
<br />
<p>Phasellus mollis placerat quam eget rutrum. Suspendisse odio nulla, rutrum id mi ac, elementum vehicula nisi. Nam pretium dignissim nunc ac efficitur. Mauris semper nunc eu ligula porta luctus. Quisque pellentesque dignissim fringilla. Morbi tincidunt
mi quis luctus blandit. Quisque erat dui, vehicula quis porttitor eu, fringilla id erat. Curabitur dapibus dolor et eros fringilla, at mattis metus placerat. In vitae mauris quis eros fringilla rhoncus et et enim. Nunc vestibulum blandit tortor ut
auctor. Praesent nisi ipsum, posuere et aliquet a, iaculis vel orci. Integer erat tortor, vehicula ut eros quis, condimentum volutpat sapien. Pellentesque id neque vitae sem condimentum dictum. Sed tristique sapien purus, quis iaculis turpis dictum
vel.
</p>
</div>
</body>
</html>
修改 我想出了第三个选项，它将绝对定位为ul，但通过将bottom设置为0并将top设置为66px以补偿菜单标题来实现它的高度：
* {
margin: 0;
padding: 0;
}
ul > li + li {
border-top: 1px solid #cc2900;
}
li a {
color: #000;
display: block;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
ul {
background-color: #b32400;
font-family: Arial;
list-style-type: none;
overflow: auto;
width: 100%;
position: absolute;
top: 66px;
bottom: 0;
}
#leftMenu {
background-color: #cc2900;
height: 100%;
overflow: hidden;
position: fixed;
width: 200px;
}
#pageContent {
margin-left: 200px;
padding: 2% 3%;
position: absolute;
}
#title {
font-family: Arial;
font-size: 36px;
padding: 12px;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<script src="index.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="leftMenu">
<div id="title">Menu title</div>
<ul>
<li><a href="#menuItem1">Menu item 1</a></li>
<li><a href="#menuItem2">Menu item 2</a></li>
<li><a href="#menuItem3">Menu item 3</a></li>
<li><a href="#menuItem4">Menu item 4</a></li>
<li><a href="#menuItem5">Menu item 5</a></li>
<li><a href="#menuItem6">Menu item 6</a></li>
<li><a href="#menuItem7">Menu item 7</a></li>
<li><a href="#menuItem8">Menu item 8</a></li>
<li><a href="#menuItem9">Menu item 9</a></li>
<li><a href="#menuItem10">Menu item 10</a></li>
<li><a href="#menuItem11">Menu item 11</a></li>
<li><a href="#menuItem12">Menu item 12</a></li>
</ul>
</div>
<div id="pageContent">
<h1>Page title goes here</h1>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mollis venenatis magna vitae rutrum. Aliquam cursus orci ac congue ultricies. Sed nec tempus est. Cras vitae efficitur arcu, eget pulvinar nibh. Vivamus gravida iaculis elit vitae consectetur.
Aliquam efficitur diam quis rutrum semper. Donec pharetra lacus a tempus lobortis. Ut sit amet ex id nisl sagittis faucibus. Curabitur sed lorem leo.</p>
<br />
<p>Phasellus mollis placerat quam eget rutrum. Suspendisse odio nulla, rutrum id mi ac, elementum vehicula nisi. Nam pretium dignissim nunc ac efficitur. Mauris semper nunc eu ligula porta luctus. Quisque pellentesque dignissim fringilla. Morbi tincidunt
mi quis luctus blandit. Quisque erat dui, vehicula quis porttitor eu, fringilla id erat. Curabitur dapibus dolor et eros fringilla, at mattis metus placerat. In vitae mauris quis eros fringilla rhoncus et et enim. Nunc vestibulum blandit tortor ut
auctor. Praesent nisi ipsum, posuere et aliquet a, iaculis vel orci. Integer erat tortor, vehicula ut eros quis, condimentum volutpat sapien. Pellentesque id neque vitae sem condimentum dictum. Sed tristique sapien purus, quis iaculis turpis dictum
vel.
</p>
</div>
</body>
</html>
答案 3 :(得分：0)
只需添加此css尝试您的代码添加一些菜单并删除并检查它。