我目前正在设计一个基本网站，我想更改左侧导航栏的行为方式，我希望它保持在原位，但我希望它具有固定的定位，以便您可以滚动并保持在那里。
我的问题是，是否无论如何都可以将其位置更改为固定，而不会四处移动并弄乱我的工作以正确定位其他所有内容，我将链接到网站的图像并包含 HTML 和 CSS。
作为一个额外的问题，谁能告诉我为什么当我通过不同的浏览器运行 HTML 时网站看起来不同，我目前正在使用谷歌浏览器。我认为使用 px 值可以解决这个问题。
编辑 2
这是两个不同屏幕上不同浏览器的屏幕截图。该网页是为我的笔记本电脑上的谷歌浏览器设计的，分辨率为 1600x900。我与之比较的计算机的分辨率为 1440x900。对窗口的任何调整都会导致问题，我再也不会缩放了。此链接转到包含 8 张图片的画廊。http://postimg.org/gallery/908tlytw/
代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso10646"/>
<meta http-equiv="content-language" content="en-GB"/>
<meta name="author" content="###########"/>
<meta name="designer" content="##########"/>
<meta name="description" content="The official website of ##########, promoting her humanist services."/>
<!--<meta name="keywords" content="##########, humanist"/>-->
<meta name="language" content="english"/>
<meta name="robots" content="index, follow"/>
<meta name="googlebot" content="index, follow"/>
<link type="text/css" rel="stylesheet" href="stylesheet lego.css"/>
<title>Home Page</title>
</head>
<body>
<div id="page">
<div class="toparea">
<img src="Client's Logo.png" id="logo"/>
<h1 id="title">Significant Ceremonies by ##########</h1>
<ul>
<li>Tel: ############</li>
<li>E-mail: #######################</li>
</ul>
</div>
<div class="sidearea">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Me</a></li>
<li><a href="">Humanism</a></li>
<li><a href="">Planning</a></li>
<li><a href="">Specialist Areas</a></li>
<li><a href="">Testimonials</a></li>
<li><a href="">Contact Me</a></li>
</ul>
</div>
<div class="mainarea">
<h2 id="subtitle">Home</h2>
<p>"I would rather live a life based on honesty, compassion and humanity through my own free will instead of it coming from the fear of
divine beings." - ###########</p>
<p>Welcome to my web site, here you can find information about the services I perform and about Humanism itself. Please feel free to
navigate around my site and if you have any questions you can either contact me directly or use the form on the 'Contact Me' page.</p>
</div>
<div class="bottomarea">
<ul>
<li>Tel: ############</li>
<li>E-mail: #######################</li>
</ul>
<img src="BHA logo.jpg" id="bhalogo"/>
</div>
</div>
</body>
</html>
CSS 代码
body
{
background-color: #CCCCCC;
}
#page
{
position: absolute;
left: 25%;
height: 100%;
width: 800px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #E6F5E6;
font-family: vijaya, sakkal majalla, narkisim, monotype corsiva, jasmineupc, gabriola, french script mt, footlight mt light, calisto mt, papyrus;
}
.toparea
{
float: left;
width: 800px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#logo
{
float: left;
width: 200px;
height: 220px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0;
margin-left: 10px;
}
#title
{
float: left;
width: 250px;
height: 160px;
margin-top: 70px;
margin-right: auto;
margin-bottom: 0;
margin-left: 80px;
text-align: center;
font-size: 32px;
color: #002E00;
}
.toparea ul
{
float: left;
width: 180px;
height: 220px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0;
margin-left: 40px;
list-style: none;
}
.sidearea
{
clear: both;
float: left;
width: 200px;
margin-top: 60px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.sidearea ul
{
list-style-type: none;
}
.sidearea ul li
{
margin-top: 0;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 0;
text-align: center;
border-style: solid;
border-radius: 5px 5px 5px 5px;
background-color: #4DB84D;
border-color: #002E00;
font-size: 25px;
}
.sidearea ul li a
{
text-decoration: none;
color: black;
}
#subtitle
{
color: #002E00;
}
.mainarea
{
float: left;
width: 560px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: 20px;
padding-right: 10px;
padding-left: 10px;
/*background-color: #EEF8EE;*/
}
.bottomarea
{
clear: both;
float: left;
width: 800px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.bottomarea ul
{
position: fixed;
bottom: 0;
left: 360px;
width: 610px;
margin-top: 0;
margin-right: auto;
margin-bottom: 10px;
margin-left: 10px;
list-style-type: none;
}
#bhalogo
{
position: fixed;
right: 388px;
bottom: 0;
width: 150px;
height: 100px;
margin-top: 0;
margin-right: 10px;
margin-bottom: 10px;
margin-left: auto;
}