Как держать нижний колонтитул всегда внизу, сохраняя чистую структуру html? - PullRequest
Новая
       42

Как держать нижний колонтитул всегда внизу, сохраняя чистую структуру html?

0 голосов
/ 02 мая 2020

Как сохранить отметку html такой же, но footer всегда внизу под main?

Здесь нижний колонтитул перекрывается со вторым .page элементом div , Как мне поставить footer ниже этого? 

body, html{
  margin:0;
  height:100%;
}
header{
  top:0;
  left:0;
  width:100%;
  position:fixed;
  background-color: red;
  height:50px;
}
main{
  width:100%;
  padding-top:50px;
  height:calc(100% - 50px);
}
.page{
  background-color:green;
  height:100%;
  width:100%;
}
.page:first-child{
  background-color:yellow;
}
footer{
  background-color:blue;
}
p{
  margin:0 0 10px 0;
}
<header>
  header
</header>
<main>
  <div class="page">page1</div>
  <div class="page">page2</div>
</main>
<footer>
  footer
  <p> Text</p>
    <p> Text</p>
    <p> Text</p>
    <p> Text</p>
</footer>

Ответы [ 2 ]

0 голосов
/ 02 мая 2020 

body, html{
  margin:0;
  padding:0;
  height:100%;
}
header{
  top:0;
  left:0;
  width:100%;
  background-color: red;
  height:50px;
}
main{
  width:100%;
}
.page{
  background-color:green;
  min-height:50vh;
  height:100%;
  width:100%;
}
.page:first-child{
  background-color:yellow;
}
footer{
  background-color:blue;
}
<header>
  header
</header>
<main>
  <div class="page">page1</div>
  <div class="page">page2</div>
</main>
<footer>
  footer
  <p> Text</p>
    <p> Text</p>
    <p> Text</p>
    <p> Text</p>
</footer>
0 голосов
/ 02 мая 2020 

body, html{
  margin:0;
  height:100%;
}
header{
  top:0;
  left:0;
  width:100%;
  position:fixed;
  background-color: red;
  height:50px;
}
main{
  width:100%;
  padding-top:50px;
  height:calc(100% - 50px);
}
.page{
  background-color:green;
  height:100%;
  width:100%;
}
.page:first-child{
  background-color:yellow;
}
footer{
  background-color:blue;
  position: absolute; 
  left: 0 ; 
  right: 0; 
  bottom: calc(-100% - 50px);
}
p{
  margin:0 0 10px 0;
}
<header>
  header
</header>
<main>
  <div class="page">page1</div>
  <div class="page">page2</div>
</main>
<footer>
  footer
  <p> Text</p>
    <p> Text</p>
    <p> Text</p>
    <p> Text</p>
</footer>
...