@Minotavr26
I

Почему футер в Css почти на всю карточку? И как опустить вниз?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>maket</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header>
        <h1>Lorem ipsum dolor sit amet consectetur.</h1>
        <nav>
            <a href="#">Item1</a>
            <a href="#">Item2</a>
            <a href="#">Item3</a>
            <a href="#">Item4</a>
        </nav>
    </header>
    <section>
        <div id="content">
            <div id="card1">
                <div id="hed1">
                    <h2>Lorem ipsum dolor sit amet.</h2>
                </div>

                <div id="left1">

                </div>
                <div id="right1">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus, illum?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis quo impedit inventore ex.

                </div>
                <div id="fot1">
                    <h3> Lorem ipsum dolor sit.</h3>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <!-- &copy Copyright all rights reserved &reg 2021 -->
    </footer>
</body>

</html>

*
{
    margin: 0px 0px ;
}
/* header */
header
{
    display: flex;
    width: 100%;
    height: 5rem;
    background-color: aquamarine;
    border-bottom: 1px solid black;
}
header h1
{
    width: 20rem;
    height: 100px;
}
header nav
{
    height: 50px;
   width: 20%;
   margin-left: auto;   
}
a
{
    position: relative;
    bottom: -1rem;
    text-decoration: none;  
    padding: 1rem;
    margin: 0.5rem;
  }
  a:hover:nth-of-type(even)
  {
      color: tomato;
  }
  a:hover
  {
      color: silver;
  }
  /* Карточка1 */
  #card1
  {
      width: 20%;
      height: 12rem;
      border: 2px solid black;
      border-radius: 5px;
  }
  #hed1
  {
      width: 100%;
      height: 2rem;
      border-bottom:1px solid black;
      background-color: gray;
  }
  #right1
  {
      width: 50%;
      height: 8rem;
      float: right;
  }
  #left1
  {
      width: 50%;
      height: 8rem;
      float: left;
      background-image: url(../image/bluePlanet.jpg);
      background-size:contain;
      background-repeat: no-repeat;
  }
  #fot1
  {
    width: 100%;
    height: -4rem;
    border-bottom:1px solid black;
    background-color: gray;
     
  }
  • Вопрос задан
  • 55 просмотров
Пригласить эксперта
Ответы на вопрос 2
Mecitan
@Mecitan
Уверенный пользователь клавиатуры
Что Вы собираетесь прижимать, если у вас там нет контента?

По факту, учитесь гуглить. Как прижать footer к низу страницы - Stack Overflow
Ответ написан
Комментировать
Ketch
@Ketch
Все гениальное просто!
зачем ты на id верстаешь? используй классы. ( <header class="header">)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы