在站点末尾设置页脚[重复]

问题描述 投票：0回答：1

页脚有问题。我知道，问题出在带有浅蓝色边框（float: left）的div样式为.card。我需要在页面末尾设置页脚。

Result

CSS / HTML代码：

body {
  font-family: arial;
  /*меняем шрифт*/
}

.dropbtn {
  text-decoration: none;
  /*убираем подчеркивание текста ссылок*/
  border: 3px solid #30A8E6;
  color: mediumslateblue;
  /*меняем цвет ссылок*/
  background: white;
  padding: 10px;
  /*добавляем отступ*/
  border-radius: 4px;
  /*добавляем скругление*/
  -moz-transition: all 0.3s 0.01s ease;
  /*делаем плавный переход*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s;
  margin-top: 20px;
  margin-right: 10px;
  font-size: 18px;
}

button:hover {
  background: #1C85BB;
  /*добавляем эффект при наведении*/
  color: white;
}

#menu {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

#logo {
  width: 250px;
  height: 170px;
}

#header {
  width: 1000px;
  height: 200px;
  background: url("img/header.jpg") no-repeat;
  margin: 0 auto;
  border: 2px solid black;
  display: flex;
  align-items: center;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.sidenav {
  display: inline-block;
  width: 150px;
  position: fixed;
  z-index: 1;
  vertical-align: middle;
  left: 10px;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #2196F3;
  display: block;
}

.sidenav a:hover {
  color: #064579;
  text-decoration: underline #2196F3;
}

.main {
  margin-left: 200px;
  margin-right: 250px;
  font-size: 40px;
  padding: 0px 10px;
  margin-top: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}


/*old styles*/

.footer {
  background: blue;
  height: 250px;
  position: fixed;
  /* Фиксированное положение */
  left: 0;
  bottom: 0;
  /* Левый нижний угол */
  padding: 10px;
  /* Поля вокруг текста */
  color: #fff;
  /* Цвет текста */
  width: 100%;
  /* Ширина слоя */
}

.menu-footer {
  list-style-type: none;
}

.menu-footer a {
  text-decoration: underline;
  color: white;
}


/*cards from main*/

.card {
  float: left;
  width: 300px;
  height: 300px;
  border: 2px solid cornflowerblue;
  border-radius: 5%;
  margin-right: 20px;
  margin-top: 25px;
}

.sideDrop {
  -moz-transition: all 0.3s 0.01s ease;
  /*делаем плавный переход*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s;
}

.img-card {
  width: 296px;
  height: 210px;
  border-radius: 5%;
}

.main-footer {
  position: absolute;
  top: 0;
  left: 0;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>Авто+</title>

  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="stylesheet" type="text/css" href="form-style.css">
</head>

<body>

  <div id="header">
    <img id="logo" src="img/logo.png" alt="Логотип">
  </div>

  <div id="menu">
    <button class="dropbtn"><b>Главная</b></button>
    <button class="dropbtn"><b>Услуги</b></button>
    <button class="dropbtn"><b>Цены</b></button>
  </div>

  <div class="form" style="">
    <form action="" class="ui-form">
      <h3>Обратная связь</h3>
      <div class="form-row">
        <input type="text" id="phone" required autocomplete="off"><label for="phone">Номер телефона</label>
      </div>
      <p><input type="submit" value="Отправить"></p>
    </form>
  </div>

  <div class="sidenav">
    <a href="#" class="sideDrop">Категории</a>
    <div class="dropdown-content">
      <a href="#">Все</a>
      <a href="#">Легковаые</a>
      <a href="#">Грузовые</a>
      <a href="#">Мотоциклы</a>
    </div>
  </div>

  <!--Main part cards-->
  <div class="main">

    <div class="card">
      <img class="img-card" src="img/bmw1.jpg">
    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
  </div>

  <!--<div class="footer">-->
  <!--    <ul style="padding: 70px 0px 0px 70px">-->
  <!--        <li class="menu-footer">-->
  <!--            <p><a href="#">Главная</a></p>-->
  <!--        </li>-->
  <!--        <li class="menu-footer">-->
  <!--            <p><a href="#">Услуги</a></p>-->
  <!--        </li>-->
  <!--        <li class="menu-footer">-->
  <!--            <p><a href="#">Цены</a></p>-->
  <!--        </li>-->
  <!--    </ul>-->
  <!--</div>-->

  <!--footer-->
  <footer style="width: 100%; height: 50px; background: darkslategray; bottom: 0;">

  </footer>
  </div>

</body>

</html>
html css footer
1个回答
1
投票

您可以在页脚css中添加“ clear：both”。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.