Question

我目前正在设计一个基本网站，我想改变左侧导航栏的行为，我希望它保持原样，但我希望它有固定的定位，以便你可以滚动它留在那里。

我的问题是，无论如何将其位置更改为固定而不会移动并弄乱我的工作以使其他所有位置正确定位，我将链接到网站的图像并包含HTML和CSS。

作为一个额外的问题，任何人都可以告诉我为什么当我通过不同的浏览器运行HTML时网站看起来不同，我目前正在使用Google Chrome。我以为使用px值摆脱了这个问题。

编辑2
以下是两个不同屏幕上不同浏览器的屏幕截图。该网页专为我的笔记本电脑上的谷歌浏览器设计，分辨率为1600x900。我所比较的计算机的分辨率为1440x900。对窗口的任何调整都会导致问题，从不会让我变焦。此链接转到包含8张图片的图库。 http://postimg.org/gallery/908tlytw/

HTML CODE

<!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;
}

Answer 1

你可以尝试这个position:fixed;top:10%;left:4%; ...示例:: FIDDLE

top的值：左边只是一个例子，根据你的需要改变它

Answer 2

如果我理解正确，你想在左边“浮动”菜单而不对你的html做太多改动。您可以通过添加另一个与.sidearea（宽度，高度等）具有相同样式的div来实现此目的，但在其他方面没有内容，作为占位符，并更改.sidearea的样式以表示position:fixed。

不同的浏览器问题更加微妙：它取决于自定义字体可用性，浏览器使用的默认CSS等。通常通过查看差异问题来解决。

将一个项目从浮动更改为固定定位，CSS

2 个答案: