Почему использование этого липкого нижнего колонтитула не работает? - PullRequest
Новая
       6

Почему использование этого липкого нижнего колонтитула не работает?

1 голос
/ 24 апреля 2020

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

мой html

<body>
      <div id="wrap">
           <header class="main-header></header>

           <div class="container">
           </div>
      </div> <!-- /#wrap -->
      <footer></footer>
</body>

мой css

.container{
    margin: 0 auto;
    width: 90%;
    overflow: auto;
    clear: both;

html,body{
    height: 100%;
}

#wrap{
    min-height: 100%;
    margin-bottom: -80px;
}

#wrap::after{
    content: "";
    display: block;
}

footer,#wrap::after{
    height: 80px;

}

Может кто-нибудь помочь мне с этим ??

Ответы [ 2 ]

0 голосов
/ 24 апреля 2020

У вас были некоторые опечатки. Вы пропустили, чтобы закрыть class собственность. Измените это в HTML

<header class="main-header></header>

, переключите его на 

<header class="main-header"></header>

... и в вашем css вы забыли закрыть класс container

.container{
    margin: 0 auto;
    width: 90%;
    overflow: auto;
    clear: both;

изменить на 

.container{
    margin: 0 auto;
    width: 90%;
    overflow: auto;
    clear: both;
}

Это ваш код исправлен. Я добавил текст «ТЕСТ» в нижний колонтитул, чтобы сделать его видимым. 

.container{
    margin: 0 auto;
    width: 90%;
    overflow: auto;
    clear: both;
}

html,body{
    height: 100%;
}

#wrap{
    min-height: 100%;
    margin-bottom: -80px;
}

#wrap::after{
    content: "";
    display: block;
}

footer,#wrap::after{
    height: 80px;

}
<body>
   <div id="wrap">
      <header class="main-header"></header>
      <div class="container">
      </div>
   </div> <!-- /#wrap -->
   <footer>TEST</footer>
</body>
0 голосов
/ 24 апреля 2020 

section
{
  height:100vh;
  width:100%;
}
.section1
{
 background:red;
}
.section2
{
 background:blue;
}
.section3
{
 background:green;
}
.footer-wrapper
{
  width:100%;
  height:10vh;
  background-color: black;
  position:sticky;
  bottom:0%;
  left:0%;
  color:white;
}
<section class="section1 wrapper"></section>
<section class="section2 wrapper"></section>
<section class="section3 wrapper"></section>
<footer class="footer-wrapper">
  <h1>Footer Text</h1>
</footer>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...