Не удается создать нижний колонтитул с помощью CSS - PullRequest
Новая
       10

Не удается создать нижний колонтитул с помощью CSS

0 голосов
/ 19 октября 2019

Я пытаюсь прикрепить div к нижней части страницы. Эта страница не прокручивается, но я не могу установить верх за пикселем, потому что она должна соответствовать размеру экрана. Все, что мне нужно, это div в нижней части страницы, который занимает 100% горизонтального пространства и 20% вертикального пространства.

Что я пробовал:

  • Создание родительского относительного и дочернего абсолютного.
  • Установка родительского min-height: 100%

Вот мой код: 

<html>
    <head>
        <title>Forget It</title>
        <link rel="stylesheet" href="../static/styles.css">
    </head>
    <body>
        <div class='parent'>
            <div class='ground'></div>
        </div>
    </body>
</html>

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #96b4ff;
}

.parent {
    position: relative;
    min-height: 100%;
}

.ground {
    position: absolute;
    height: 20%;
    bottom: 0;
    background-color: #2cb84b;
}

Есть идеи? Спасибо!

1 Ответ

1 голос
/ 19 октября 2019

Просто примените width: 100%; к .ground, чтобы div получил полную ширину. 

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #96b4ff;
}

.parent {
  position: relative;
  min-height: 100%;
}

.ground {
  position: absolute;
  height: 20%;
  width: 100%;
  bottom: 0;
  background-color: #2cb84b;
}
<div class='parent'>
  <div class='ground'>footer</div>
</div>
...