滚动条在html/css中不起作用。文本从页面中消失
滚动条在html/css中不起作用。文本从页面中消失
提问于 2021-04-17 07:46:21
这是我的HTML的一个子页面，我不知道为什么我不能滚动。有没有人能解释一下为什么它不工作？我试过从其他有类似问题的人那里读到的一些东西，但他们也不能解决它。我试着在底部添加一个div，我一直在处理溢出和高度，但我没有让它工作。
body {
background-color: white;
}
.factions {
position: fixed;
top: 200px;
left: 150px;
background: transparent;
color: black;
width: 100%;
padding: 10px;
}
h1 {
font-size: 50px;
font-family: campus;
}
#USA-text {
font-size: 20px;
}
@font-face{
font-family: campus;
src: url(../fonts/arial_narrow_7.ttf)
}
.content {
position: fixed;
bottom: 0;
background: transparent;
color: #f1f1f1;
width: 100%;
padding: 20px;
}
@font-face {
font-family: Zector;
src: url(../fonts/Zector.otf);
}
#myBtn5 {
position: fixed;
width: 150px;
font-size: 18px;
font-family: Zector;
border: none;
background: transparent;
color: rgb(139, 139, 139);
cursor: pointer;
right: 0px;
top: 30px;
}
#myBtn4 {
position: fixed;
width: 150px;
font-size: 18px;
font-family: Zector;
border: none;
background: transparent;
color: rgb(139, 139, 139);
cursor: pointer;
right: 100px;
top: 30px;
}
#myBtn3 {
position: fixed;
width: 150px;
font-size: 18px;
font-family: Zector;
border: none;
background: transparent;
color: rgb(139, 139, 139);
cursor: pointer;
right: 200px;
top: 30px;
}
#myBtn2 {
position: fixed;
width: 150px;
font-size: 18px;
font-family: Zector;
border: none;
background: transparent;
color: rgb(139, 139, 139);
cursor: pointer;
right: 300px;
top: 30px;
}
#myBtn {
position: fixed;
width: 150px;
font-size: 18px;
font-family: Zector;
border: none;
background: transparent;
color: rgb(139, 139, 139);
cursor: pointer;
right: 400px;
top: 30px;
}
#myBtn:hover {
color: rgb(30, 86, 207);
}
#myBtn2:hover {
color: rgb(30, 86, 207);
}
#myBtn3:hover {
color: rgb(30, 86, 207);
}
#myBtn4:hover {
color: rgb(30, 86, 207);
}
#myBtn5:hover {
color: rgb(30, 86, 207);
}
#myImg {
position: fixed;
width: 150px;
border: none;
background: transparent;
color: #fff;
cursor: pointer;
left: 110px;
top: 25px;
}<!DOCTYPE html>
<html>
<head>
<title> WarzoneRP Factions </title>
<link rel="shortcut icon" type="image/x-icon" href="../images/WARZONE_LOGO_SERVER.png">
<link rel="stylesheet" href="../css/factions.css">
</head>
<body>
<div class="content">
<Img> <source src="../images/WARZONE_LOGO_SERVER.png"> </Img>
</div>
<div>
<a id="myBtn" href="https://discord.gg/ySpH6Fd" target="_blank">Discord</a>
<a id="myBtn2" href="https://www.paypal.com/paypalme/UnitedEmpireNetwork" target="_blank">Support</a>
<a id="myBtn3" href="fivem://connect/fivem.warzoneroleplay.com" target="_blank">Connect</a>
<a id="myBtn4" href="Factions.html">Factions</a>
<a id="myBtn5" href="../index.html">Home</a>
<a href="https://warzoneroleplay.netlify.app/">
<img src="../images/WARZONE_LOGO_SERVER.png" alt="Warzone Logo" style="width:150px;height:150px;" id="myImg">
</a>
</div>
<div class="factions">
<img src="../images/USA.png" style="width:40%;height:40%;" id="myImgUSA">
<p>
<h1>United States Armed Forces </h1>
<p id="USA-text">We are a powerful faction in the region and have proven from time to time<br>
that no foreign adversary can match the pure might and fire power that we are<br>
capable of bringing to the table. Here in the United States Armed Forces you are<br>
expected to fulfill the orders of the Commander in Chief and follow our 3 core values<br>
set in place by our founding fathers. Honor, duty, and respect.</p>
</p>
<p>
<h1>Russian Armed Forces</h1>
<p id="RU-text">The Russian Armed Forces gained a foothold in the region by annexing the provinces of Narva,<br>
Nazbar and the Rybinsky Republic. Russia has control over these regions and has set up military installations<br>
there to operate out of. Now, the Russian Government is making plans to push south towards the disputed regions<br>
and assert control over the Anti-Russian Terrorist groups within those regions.</p>
</p>
</div>
</body>
</html>
回答 2
Stack Overflow用户
发布于 2021-04-17 08:19:53
如果从.factions位置移除:已修复；
并将其更改为例如位置:相对；
如果视口足够小，您将获得滚动条。您可以将内容添加到页面底部，滚动条也可以正常工作。
如果你想看一看，你也需要纠正一个图片标签
Stack Overflow用户
发布于 2021-04-17 19:11:05
我很感谢你们的建议。我现在让它工作了。对html和css来说还是个新手。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67133402
复制相关文章
相似问题
腾讯云开发者
