Question

我的网站页脚按预期显示在LOCALHOST上。但是，当将其上传到服务器并通过www.mushtor.com进行访问时，情况就一团糟。下面是代码：

<!DOCTYPE html>
<html>

    <head>
        <title>Mushtor</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="globalstyle.css">
        <link rel="stylesheet" type="text/css" href="homeCategories.css">
    </head>

    <body>
            <div class="topnav">
                <a class="active" href="index.html">হোম পেজ</a>
            </div>

            <div class="header">
                <h1>MUSHTOR</h1>
                <p>স্ব-শিক্ষায় সহায়ক</p>
            </div>


            <div class="row">
                <div class="leftcolumn" style="padding-left: 30px; padding-right: 30px;">
                        <div class="container">
                        <h2 style="text-align: center;">শিক্ষার বিষয়বস্তু নির্বাচন করুন</h2>
                            <div id="cat1">
                                <a href="mathematics.html" class="categoryLinks">গণিত</a>
                            </div>
                            <div id="cat2">
                                <a href="physics.html" class="categoryLinks">পদার্থবিদ্যা</a>
                            </div>
                            <div id="cat3">
                                <a href="windows10.html" class="categoryLinks">উইন্ডোজ ১০</a>
                            </div>
                            <div style="clear:both;"></div>
                        </div>
                </div>

                <div class="rightcolumn">
                    <h2>লেখক সম্পর্কে</h2>
                    <p>আমি একজন শিক্ষার্থী। আমার ক্ষুদ্র জ্ঞান আপনাদের সাথে ভাগ করছি।</p>
                </div>
            </div>


            <div class="footer">
                <p>কপিরাইট &copy; 2020 Mushtor.com</p>
            </div>

    </body>
</html>

globalstyle.css中的页脚类的代码如下：

.footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: green;
    color: white;
    text-align: center;
}

请参见下面的截图：

Answer 1

您应将其position设置为fixed而不是absolute，例如：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: green;
   color: white;
   text-align: center;
}
</style>
</head>
<body>

<h2>Example footer</h2>

<div class="footer">
  <p>Footer</p>
</div>

</body>
</html>

页脚不在正确的位置

1 个答案: