我在一个网站上工作，我在侧面有一段不完全适合的文字，所以部分文字是不可见的，因为网站的底部在那里结束。我想让它可滚动，所以我可以通过向下滚动来查看完整的内容。
#header {
z-index: 1;
position: fixed;
width: 99%;
margin-top: -20px;
height: 800px;
background-color: white;
margin-top: 5px;
margin-bottom: 10px;
box-shadow: 0px 10px 16px -1px rgba(0,0,0,0.75);
}
#title {
color: #03A9F4;
font-size: 40px;
font-family: 'Roboto', sans-serif;
}
#content {
display: flex;
}
#left {
flex: 1;
}
#right {
width: 200px;
word-wrap: break-word;
}
#column {
font-family: 'Roboto', sans-serif;
font-size: 14px;
position:
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
margin-left: 10px;
margin-right: 10px;
font-family: 'Roboto', sans-serif;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Roboto', sans-serif;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #03A9F4;
}
#image1 {
width:800px;
height:400px;
margin-left: 60px;
}
/*#03A9F4*/ <!doctype html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Future Tech network</title>
<link rel="icon" href="/favicon.ico">
</head>
<body bgcolor="#ECEFF1">
<div id="header">
<p id="title" align="center">Future Tech Network logo</p>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">Artikelen</a></li>
<li><a href="#contact">Contact</a></li>
<img src="slogan.jpg" align="right">
</ul>
<div id="balk2"></div>
<div id="content">
<div id="left"><img id="image1" src="msi nightblade front.jpg" alt="Klik hier voor het volledige review"></div>
<div id="right" align="center">
<p id="column">Zoekend in de bakken van een tweedehands markt viel mijn oog op Quake II.
Een meester titel van zijn tijd.
Een tijd ver voor mijn tijd.
Geïntegreerd door de plaatjes die grapics laten zien waar flash spelletjes niet aan kunnen tippen.
Terwijl ik naar huis ga blijf ik kijken op de achterkant van het hoesje.
Zoals ik dat ook altijd deed toen ik Rollercoaster tycoon kocht en Steam mij nog onbekend was. Het heeft toch wat.
De fysieke kopie van een game. Om zo’n stukje klassieke game geschiedenis te vinden en het mee naar huis te kunnen nemen.
het leek me prachtig om een plaats af te laten staan in mijn collectie van de nieuwste games door zo'n oude veteraan
Een mix van modern en klassiek.
Ik haalde de cd uit het hoesje maar tot mijn schrik miste er een diskdrive. Ik had die een paar maanden geleden trots ingewisseld voor een fan met de gedachte: “Ach alles staat toch op Steam”.
Hier was hij dus. De tijd, hij heeft me ingehaald. Ik dacht hem te slim af te zijn door een stukje geschiedenis te kunnen spelen maar tijd haalt je altijd in.
Nu is het niet meer dan een relikwie in een museum. Met een zucht start ik Steam op en geef ik me over aan de digitale economie van games</p>
</div>
</div>
</div>
</body>
</html>
如果再犯错误，请纠正我。到目前为止我还是一个菜鸟，但我试图充分利用它。
答案 0 :(得分：1)
男人，有很多错误。
首先，缩进是使代码可读的原因，这太可怕了。谷歌快速搜索如何缩进应该可以改善你的缩进。
您的代码问题是整个页面都在#header div中。我更改了它，只有导航栏位于标题div中。此外，标头高800像素，并设置为z-index: 1。
然后，您不应该将图片放在ul中：将其放在li或ul之外。
此外，CSS中存在一些语法错误（如position: }），并且您重复了两次margin-top。
最后，你应该考虑将font-family设置为body而不是每个元素，如下所示：
body {
font-family: 'Roboto', sans-serif;
}
摘录：
#header {
position: fixed;
top:10px;
width: 99%;
height: 200px;
background-color: white;
box-shadow: 0px 10px 16px -1px rgba(0, 0, 0, 0.75);
}
#title {
color: #03A9F4;
font-size: 40px;
font-family: 'Roboto', sans-serif;
}
#content {
display: flex;
margin-top:230px;
}
#left {
flex: 1;
}
#right {
width: 200px;
word-wrap: break-word;
}
#column {
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
margin-left: 10px;
margin-right: 10px;
font-family: 'Roboto', sans-serif;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Roboto', sans-serif;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #03A9F4;
}
#image1 {
width: 800px;
height: 400px;
margin-left: 60px;
}
/*#03A9F4*/<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>Future Tech network</title>
<link rel="icon" href="/favicon.ico" />
</head>
<body bgcolor="#ECEFF1">
<div id="header">
<p id="title" align="center">Future Tech Network logo</p>
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li><a href="#news">Artikelen</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
<img src="slogan.jpg" align="right">
</div>
<div id="content">
<div id="left">
<img id="image1" src="msi nightblade front.jpg" alt="Klik hier voor het volledige review" />
</div>
<div id="right" align="center">
<p id="column">
Zoekend in de bakken van een tweedehands markt viel mijn oog op Quake II. Een meester titel van zijn tijd. Een tijd ver voor mijn tijd. Geïntegreerd door de plaatjes die grapics laten zien waar flash spelletjes niet aan kunnen tippen. Terwijl ik naar
huis ga blijf ik kijken op de achterkant van het hoesje. Zoals ik dat ook altijd deed toen ik Rollercoaster tycoon kocht en Steam mij nog onbekend was. Het heeft toch wat. De fysieke kopie van een game. Om zo’n stukje klassieke game geschiedenis
te vinden en het mee naar huis te kunnen nemen. het leek me prachtig om een plaats af te laten staan in mijn collectie van de nieuwste games door zo'n oude veteraan Een mix van modern en klassiek. Ik haalde de cd uit het hoesje maar tot mijn schrik
miste er een diskdrive. Ik had die een paar maanden geleden trots ingewisseld voor een fan met de gedachte: “Ach alles staat toch op Steam”. Hier was hij dus. De tijd, hij heeft me ingehaald. Ik dacht hem te slim af te zijn door een stukje geschiedenis
te kunnen spelen maar tijd haalt je altijd in. Nu is het niet meer dan een relikwie in een museum. Met een zucht start ik Steam op en geef ik me over aan de digitale economie van games
</p>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
在大多数情况下，当您确切知道网站的大小时，您可以设置身高：
body{
height: 600px;
}
有时您希望网站自动增长+一些额外的像素，例如，有一个位置：固定的页脚
footer {
height: 100px;
position: fixed;
bottom: 0;
}
在这种情况下，你可以这样做：
body {
padding-bottom: 100px
}
这样，身体会有更多的填充空间，这样固定的页脚就不会阻碍身体内容。我希望这会有所帮助。
答案 2 :(得分：0)
尝试使用overflow-y：scroll;
<div id="right" style="overflow-y: scroll;">
如果有帮助，请告诉我