нижний колонтитул не находится внизу страницы

ProgramBox

нижний колонтитул не находится внизу страницы

Post author:admin
Запись опубликована:23 октября, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

у меня проблема, когда мой элемент нижнего колонтитула отсутствует в нижней части страницы, когда я просматриваю страницу через мобильный это мой html

 
<!DOCTYPE html>
<html>
    <head>
        <title>Ziad Alian</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="mystyle.css">
    </head>
    <body>
        <h4>Ziad Alian</h4>
        <img class="imgz" src="zCmakv5P_400x400.jpg"/></img>
        <ul>
            <li><a href="#aboutme">ABOUT ME</a></li>
            <li><a href="#">PROJECTS</a></li>
            <li><a href="#contact">CONTACT</a></li>
        </ul>
        <hr>
        <div>
            <p id="hello">Hello World! </p>
            <p id="aboutme">I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br/>
                 I studied Geomatics but I don't like it cause computer science is my passion.<br/> 
                 I'm a self taught web developer, My goal is to be a fucll stack developer using 
                HTML5, CSS, JavaScript, React, Python and Django.<br/>
                I love programming and everything that has to do with technology, the internet and writing code.
             </p>
        </div>
        <hr>
        <div id="contact">
            <ul>
                 <li><a href="https://github.com/ziaalian">GitHub</a> </li>   
                 <li><a href="https://www.linkedin.com/in/ziad-alian-24b1139b/">LinkedIn</a> </li>   
                 <li><a href="https://twitter.com/ziaalian">Twitter</a> </li>   
                 <li><a href="https://www.instagram.com/ziaalian/">Instagram</a> </li>   
            </ul>
            
        </div>
        <br>
        <footer>amp;copy; 2020 Ziad Alian</footer>
    </body>
</html>

И это мой CSS

здесь был добавлен мой элемент нижнего колонтитула

 
  footer {
      background-color: black;
      color: white;
     padding: 0.5em;
         
  }

Редактировать

я добавил этот код

  body {
    background-color:whitesmoke;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    
}

h4 {
    text-align: center;
    font-size: 68px;
    font-weight: 80;
    color: teal;
    }
.imgz {
    width: 200px;
    border-radius: 50%;
    
    
    
}
#hello {
    text-align: center;
    font-size: 30px;
    color: teal;
    }

#aboutme {
    font-size: medium;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    
}


p {
    text-align: justify;
  }


      
  footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: black;
    color:white;
    padding: 0.5em;
    margin: 0;
    margin-top: auto;
      }

и теперь это исправлено, как будто я просто спускаюсь и поднимаюсь вместе со мной, пока я прокручиваю страницу, я просто хочу, чтобы она оставалась внизу

mywebsite

1. Он находится в нижней части вашей страницы, на вашей странице просто недостаточно места, чтобы сдвинуть его вниз. Вы можете найти способы обойти это с помощью CSS и простого поиска в Google

2. Ну …. это зависит от того, куда вы его поместите….

3. это мой код github.com/ziaalian/my-portfolio.git

4. кстати, я поместил его внизу

5. пожалуйста, не размещайте ссылку на свой код. Разместите свой код в виде фрагмента в stackoverflow. Для этого он и существует. Вы получите больше помощи и более быстрые ответы, если упростите это

Ответ №1:

Вы не интегрировали некоторые свойства в CSS-file .

Вы не интегрировали блок элемента footer в HTML-file .

Новые свойства нижнего колонтитула

 footer {

   background-color: black;

   color: white;

   padding: 0.5em;

   position:fixed;

   left:0px;

   bottom:0px;

   height:30px;

   width:100%;

}

Старые свойства нижнего колонтитула

 footer {

   background-color: black;

   color: white;

   padding: 0.5em;

}

Новый нижний колонтитул

   <footer> amp;copy; 2020 Ziad Alian</footer>

Эти свойства фиксируют объект для просмотра пользователем, посещающим веб-сайт, что означает, что объект является динамическим для просмотра пользователем.

1. можете ли вы взглянуть на gif, который я поместил в свой вопрос в качестве редактирования, пожалуйста

2. Здравствуйте, в исходном коде, который я вам отправил, footer исправлено только для точки зрения пользователя, но не для содержимого веб-сайта. Я отправляю вам новый, полностью разработанный сайт, который также имеет лучшую структуру исходного кода.

3. посмотрите на веб-сайт, теперь я добавил ваш код, и нижний колонтитул не фиксируется внизу страницы, когда я прокручиваю вверх и вниз, он идет со мной ziaalian.com

4. Я отправляю вам новый, полностью разработанный сайт, который также имеет лучшую структуру исходного кода.

5. извините, но я здесь новичок, так что вы уже отправили код?

Ответ №2:

Вы также можете попробовать присвоить основному разделу min-height: 100vh значение so, чтобы переместить нижний колонтитул вниз. Посмотрите, поможет ли это.

Ответ №3:

Попробуйте использовать position: fixed , чтобы нижний колонтитул был прикреплен к нижней части окна просмотра.

При использовании фиксированного позиционирования вы также должны убедиться, что вы установили свойства left: 0 и width: 100% , чтобы нижний колонтитул имел ту же ширину, что и окно просмотра.

 footer {
  background-color: black;
  color: white;
  padding: 0.5em;
  position:fixed;
  bottom:0;
  left:0;
  width:100%
}

 <footer>amp;copy; 2020 Ziad Alian</footer>

Развернуть фрагмент

1. Пожалуйста, объясните, как работает ваш код; никогда не публикуйте код сам по себе.

2. не могли бы вы еще раз взглянуть на мой пост, пожалуйста, я только что опубликовал полный код

Ответ №4:

Я разработал для вас веб-сайт с той же структурой, что и ваш старый веб-сайт, но с незначительными изменениями.

Исходный код теперь имеет лучшую структуру.
Комментарии были добавлены, чтобы избежать потери исходного кода.

HTML

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"><head>
    <title>2020 Ziad Alian</title>
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
    <div id="container">
       <div id="header">
          <!-- Header start -->
          <h1>
             <center>2020 Ziad Alian</center>
          </h1>
          <!-- Header end -->
       </div>
       <div id="body">
          <!-- Body start -->
          <center>
             <img class="imgz" src="zCmakv5P_400x400.jpg"></img>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li> ABOUT ME</li></a></p>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li>PROJECTS</li></a></p>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li>CONTACT</li></a></p>
          </center>
          <hr>
          <p>
          <center style="font-size: 30px"> HELLO WORLD</style></center>
          </p>
          <center>
             <p><strong>I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br><br>
                I studied Geomatics but I don't like it cause computer science is my passion.<br><br>
                I'm a self taught web developer, My goal is to be a fucll stack developer using HTML5, CSS, JavaScript, React, Python and Django.<br><br>
                I love programming and everything that has to do with technology, the internet and writing code.</strong>
             </p>
          </center>
          <hr>
          <center>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li> GitHub</li></a></p>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li>LinkedIn</li></a></p>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li>Twitter</li></a></p>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li>Instagram</li></a></p>
          </center>
          <!-- Body end -->
       </div>
       <div id="footer">
          <!-- Footer start -->
          <center>
             <p><font color="#FFFFFF">amp;copy; 2020 Ziad Alian</font></p>
          </center>
          <!-- Footer end -->
       </div>
    </div>
 </body>
</html>

CSS

   html,
  body {
      margin:0;
      padding:0;
      height:100%;
  }
  #container {
      min-height:100%;
      position:relative;
  }
  #header {

      padding:10px;
  }
  #body {
      padding:10px;
      padding-bottom:60px;    
  }
  #footer {
      position:absolute;
      bottom:0;
      width:100%;
      height:60px;    
      background:#000000;
  }

  .imgz {
  border-radius: 50%;
  }

  #header p,
  #header h1 {
      margin:0;
      padding:10px 0 0 10px;
  }
  #footer p {
      margin:0;
      padding:10px;
  }

1. извини, братан, но я скачал твой код, и он не сработал, нижнего колонтитула там нет, а изображение квадратное, я не знаю, как вставить gif в комментарий, чтобы показать вам результат

2. Здравствуйте, теперь я добавил правильные свойства в файл CSS.

3. здравствуйте, можете ли вы еще раз перепроверить мой код в моем сообщении!

4. Здравствуйте, вам нужно скопировать исходный код HTML и CSS и вставить его в любой текстовый редактор. Файл, содержащий исходный код HTML, помечен Index.html , а файл, содержащий исходный код CSS, помечен style.css . Извините за более поздний ответ, я работал над другой темой.

5. да, я сделал это, и это не сработало, можете ли вы скопировать и вставить мой код, который я только что опубликовал снова в своем сообщении, и сказать мне, что нижний колонтитул поднимается и опускается вместе со мной, когда я прокручиваю страницу, пожалуйста!