Нижний колонтитул находится в неправильном месте - PullRequest
Новая
       116

Нижний колонтитул находится в неправильном месте

0 голосов
/ 19 июня 2020

Нижний колонтитул моего веб-сайта отображается на 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;
}

См. Прилагаемый снимок экрана ниже:

Here is a screenshot

1 Ответ

0 голосов
/ 19 июня 2020

Вы должны установить его 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...