我正在开发我的第一个网站，我在每个页面的顶部都有导航链接。我注意到该站点的一些非常特殊的行为:高度大于或等于最大垂直像素的页面占据一定宽度，而内容未填充高度的页面具有不同的宽度，即使代码为菜单完全一样。为什么会发生这种情况，补救措施是什么？这是代码: html文件:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>About</title>
<link rel="stylesheet" type="text/css" href="about_style.css" />
</head>
<body>
<nav id="menu">
<ul>
<li id="home"><a href="../index.html">Home</a></li>
<li id="news"><a href ="../news/index_news.html">News</a></li>
<li id="tragic_complexity"><a href="../tragic/index_tr.html">Tragic Complexity</a></li>
<li id="d_diary"><a href="../diary/d_diary.html">D Diary</a></li>
<li id="geeks"><a href="../geeks/geeks.html">Geeks = 1</a></li>
<li id="about">About</li>
</ul>
</nav>
<ul id="info">
<li>
About the site
</li>
<li>
About the founder
</li>
</ul>
</body>
</html>
CSS文件:
body
{
background-image:linear-gradient(#336666, #66cccc);
}
#info,#menu
{
text-align:center;
}
#info li
{
display:block;
font-family:serif;
height:300px;
width:600px;
border:1px solid black;
overflow:hidden;
padding: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
margin:20px auto 20px auto;
background-color:white;
}
#menu ul li
{
display: inline-block;
margin:auto 20px auto 20px;
font-size: 150%;
font-family: Arial, Verdana, sans-serif;
}
最佳答案
这很可能仅仅是因为在那些较长的页面上而不是在其他页面上引入了垂直滚动条。如果您想删除此行为，您可以强制添加滚动条，而不管内容高度如何。
检查这些链接以了解如何:
http://egilhansen.com/2007/03/28/css-trick-always-show-scrollbars
http://css-tricks.com/snippets/css/force-vertical-scrollbar/
从第一个链接:
html {
overflow: -moz-scrollbars-vertical;
overflow: scroll;
}
关于html - 如果页面内容不占据 dipsplay 的高度，防止导航链接调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17781966/