gpt4 book ai didi

html - 浏览器滚动条不出现

转载 作者:太空宇宙 更新时间:2023-11-04 04:27:30 25 4
gpt4 key购买 nike

我遇到一个问题,当我的网页内容超出浏览器窗口时,浏览器滚动条没有出现。我很确定问题出在容器 div 而不是页脚,因为删除页脚不会改变任何东西。有什么建议吗?

这是 html 部分。

<html>
<head>
<link rel ="stylesheet" type="text/css" href="style.css"></link>
<style>
body {background-color:#64B6B1;}
</style>
</head>
<body>
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<div id="footer">
<div class="icon"><h2>AB</h2></div>
<ul>
<li><a href="webdesign.html"><div class="webdesign" style="background-color:#64B6B1;width:25px;height:25px;"></div></a></li>
<li><a href="graphicdesign.html"><div class="graphic"></div></a></li>
<li><a href="about.html"><div class="about"></div></a></li>
<li><a href="index.html"><div class="home"></div></a></li>
</ul>
</div>
</body>
</html>

这是 CSS 部分。

@charset "utf-8";

html {height:100%;}

body {
font-family:Arial Narrow, sans-serif;
color:#FFFFFF;
text-align:right;
height:100%;
overflow:hidden;
}

h1 {font-family:Arial, sans-serif;}

.box {
width:390px;
height:300px;
float:left;
background-color:#CCCCCC;
}

#container {
position:absolute;
width:80%;
min-width:780px;
top:10%; right:0; left:0;
margin: auto;
padding:5px;
background-color:#000000;
}

/* FOOTER */

#footer {
width:100%;
height:50px;
position:fixed;
bottom:0;
right:0;
z-index:10;
overflow:hidden;
background-color:#FFFFFF;
}

ul {
list-style-type:none;
float:right;
margin:0;
padding:15px;
}

li {
display:inline;
float:right;
padding-left:10px;
}

div.home {
-moz-border-radius:50px/50px;
-webkit-border-radius:50px/50px;
border-radius:50px/50px;
background-color:#46433A;
width:20px;
height:20px;
transition:width 1s, height 1s, background-color 1s;
-webkit-transition:width 1s, height 1s, background-color 1s;
}

div.home:hover {
width:25px;
height:25px;
background-color:#8AB688;
}

div.about {
-moz-border-radius:50px/50px;
-webkit-border-radius:50px/50px;
border-radius:50px/50px;
background-color:#46433A;
width:20px;
height:20px;
transition:width 1s, height 1s, background-color 1s;
-webkit-transition:width 1s, height 1s, background-color 1s;
}

div.about:hover {
width:25px;
height:25px;
background-color:#DED4B9;
}

div.webdesign {
-moz-border-radius:50px/50px;
-webkit-border-radius:50px/50px;
border-radius:50px/50px;
background-color:#46433A;
width:20px;
height:20px;
transition:width 1s, height 1s, background-color 1s;
-webkit-transition:width 1s, height 1s, background-color 1s;
}

div.webdesign:hover {
width:25px;
height:25px;
background-color:#64B6B1;
}

div.graphic {
-moz-border-radius:50px/50px;
-webkit-border-radius:50px/50px;
border-radius:50px/50px;
background-color:#46433A;
width:20px;
height:20px;
transition:width 1s, height 1s, background-color 1s;
-webkit-transition:width 1s, height 1s, background-color 1s;
}

div.graphic:hover {
width:25px;
height:25px;
background-color:#CE534D;
}

div.icon {
-moz-border-radius:50px/50px;
-webkit-border-radius:50px/50px;
border-radius:50px/50px;
background-color: #FFFFFF;
width:35px;
height:35px;
float:left;
margin-left: 5px;
margin-top: 4px;
border-style:double;
border-color:#46433A;
}

h2 {
font-size:18px;
font-family:Arial Narrow,sans-serif;
color:#46433A;
margin-top:7px;
margin-right:6px;
}

最佳答案

编辑:

I read "sidebar" as "scrollbar"; This answer solves a scrollbar problem.
Anyway, what the heck is "browser sidebar"?


body { ... overflow:hidden; ... }

应该是

body { ... overflow:auto; ... }

或者只是删除它。

关于html - 浏览器滚动条不出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17977403/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com