Блог

Главная - Вопросы по программированию - Сделайте положение нижнего колонтитула приклеенным к концу

Сделайте положение нижнего колонтитула приклеенным к концу

#html #css

Вопрос:

Я пытаюсь создать страницу-клон Google, я пытаюсь прикрепить нижний колонтитул к концу окна просмотра. Но когда я пробую позицию: абсолютное дно: 0, она прилипает к концу, но страница переполняется.

Я пытался использовать html, тело и * рост: 100%, но это не работает.

Я делюсь своим репозиторием github, чтобы вы могли проверить код: https://github.com/Diefonro/HTML-CSS

Вы также можете проверить веб-страницу (на ПК) по адресу: https://diefonro.github.io/HTML-CSS/

Код:

 * {
  margin: 0;
}

html{
    max-height: 100%;
}
body {
  font-family: Arial, sans-serif;
}

nav {
  text-align: right;
  position: relative;
  top: 9px;
  right: 8px;
}

#nav-g-i {
  display: inline-block;
  position: relative;
  top: 2px;
  right: 23px;
}

#nav-gr-a {
  display: inline-block;
  position: relative;
  top: 5px;
  right: 10px;
}

#grid,
#profile-pic {
  opacity: 50%;
}

section {
  text-align: center;
  position: relative;
  top: 24px;
}

.input-g {
  position: relative;
  bottom: 2px;
  width: 500px;
  line-height: 17px;
  border: none;
  outline: none;
}

.input-cont {
  width: 553px;
  height: 16px;
  position: relative;
  bottom: 2px;
  right: 1px;
  color: #222;
  border: 1px solid #dfe1e5;
  font-size: 13px;
  padding: 14px;
  border-radius: 80px;
  margin: 24px 0px;
  display: inline-block;
}
.input-cont:hover,
.input-cont:focus {
  box-shadow: 0 1px 5px 0 rgba(32, 33, 36, 0.28);
  border-color: rgba(40, 40, 41, 0);
}

.input-cont > img {
  position: absolute;
  top: 10px;
  right: 11px;
  width: 23px;
}

.input-cont .search-i {
  position: absolute;
  top: 11.5px;
  right: 547px;
  width: 20px;
  opacity: 40%;
}

#grid {
  position: relative;
  bottom: 3px;
  margin-right: 16px;
}
.menu-item {
  font-size: 13px;
  color: #5b5f63;
  text-decoration: none;
  position: relative;
  bottom: 8px;
  margin-right: 10px;
}

.menu-item:hover {
  text-decoration: underline;
}

#profile-pic {
  width: 32px;
  height: 32px;
}

.btn-cont {
  position: relative;
  top: 3px;
}

.custom-btn {
  background-color: #f2f2f291;
  color: #a2a8af;
  font-size: 14px;
  height: 36px;
  padding: 0 16px;
  background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
  border: 1px solid transparent;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
  color: #222;
  border-radius: 5px;
}

.custom-btn:first-of-type {
  margin-right: 7px;
}

.custom-btn:hover {
  border: 1px solid #c6c6c656;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  color: #222;
}

.custom-btn:active {
  border: 1px solid cornflowerblue;
}

.drop-d {
  width: 285px;
  padding: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: absolute;
  right: 11px;
  border-radius: 12px;
  display: none;
}

.grid:hover {
  display: inline-block;
}

.dd-item:hover {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.dd-item {
  margin-top: 10px;
  display: inline-block;
  width: 70px;
  padding: 6px 3px;
}

.dd-item > img {
  height: 50px;
  width: 50px;
}

.dd-item > p {
  color: rgba(0, 0, 0, 0.87);
  margin: 0;
  margin-top: 15px;
  margin-bottom: 5px;
}

.dd-cont {
  display: inline-block;
}

.dd-cont:hover .drop-d {
  display: block;
}

.s-lang {
  font-size: 13px;
  color: #333;
  position: relative;
  top: 30px;
  right: 3px;
}

.s-lang a {
  text-decoration: underline;
}
.s-lang a:visited {
  color: rgb(30, 30, 179);
}

.ll {
  display: inline-block;
  position: relative;
  left: 3px;
}

.footer1,
.footer2 {
  font-size: 15px;
  background-color: #d6d8da49;
  color: #8a8686;
  border-bottom: 1px solid rgba(155, 155, 155, 0.267);
  position: relative;
  top: 200px;
}

.footer2 a {
  display: inline-block;
  text-decoration: none;
  padding: 12px;
  font-size: 14px;
}

.footer3 a {
  font-size: 14px;
  padding: 14px;
  position: relative;
  top: 170px;
  left: 990px;
  text-decoration: none;
  color: #8a868683;
}
span.f1 {
  display: inline-block;
  margin-left: 15px;
  padding: 16px;
}

.a-li {
  margin-left: 20px;
}

a:visited {
  color: inherit;
}

.footer-cont {
  position: absolute;
  bottom: 0;
  width: 100%;

} 
 <!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>Google Clone Optimized (by Diefonro)</title>
    <link rel="shortcut icon" href="assets/icons/favicon.ico" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material Icons"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <nav>
        <div class="nav">
          <div id="nav-g-i">
            <a class="menu-item" href="#">Gmail</a>
            <a class="menu-item" href="https://google.com/imghp">Images</a>
          </div>
          <div class="" id="nav-gr-a">
            <div class="dd-cont">
              <div class="grid">
                <img
                  id="grid"
                  src="assets/icons/apps_black_24dp.svg"
                  alt="apps-icon"
                />
              </div>
              <div class="drop-d">
                <div class="dd-item">
                  <img
                    id="dd-search"
                    src="assets/icons/google-logo-dd.png"
                    alt="google-search-icon"
                  />
                  <p>Search</p>
                </div>
                <div class="dd-item">
                  <img
                    id="dd-maps"
                    src="assets/icons/google-maps-dd.png"
                    alt="google-maps-icon"
                  />
                  <p>Maps</p>
                </div>
                <div class="dd-item">
                  <img
                    id="dd-keep"
                    src="assets/icons/google-keep-dd.png"
                    alt="google-keep-icon"
                  />
                  <p>Keep</p>
                </div>
                <div class="dd-item">
                  <img
                    class="dd-drive"
                    src="assets/icons/Google_Drive_dd.png"
                    alt="google-keep-icon"
                  />
                  <p>Drive</p>
                </div>
                <div class="dd-item">
                  <img
                    class="dd-calendar"
                    src="assets/icons/512px-Google_Calendar_icon_dd.png"
                    alt="google-calendar-icon"
                  />
                  <p>Calendar</p>
                </div>
                <div class="dd-item">
                  <img
                    class="dd-photos"
                    src="assets/icons/google_photos-dd.png"
                    alt="google-photos-icon"
                  />
                  <p>Photos</p>
                </div>
              </div>
            </div>
            <img
              id="profile-pic"
              src="assets/icons/account_circle_black_24dp.svg"
              alt="account-icon"
            />
          </div>
        </div>
      </nav>
    </header>
    <main>
      <section>
        <div class="logo-cont">
          <img
            id="google-logo"
            src="assets/images/googlelogo_color_272x92dp.png"
            alt="google-logo"
          />
        </div>
        <div class="input-cont">
          <input class="input-g" type="text" />
          <img
            src="assets/icons/search_black_24dp.svg"
            alt="search-icon"
            class="search-i"
          />
          <img
            class="mic"
            src="assets/icons/Google_mic.svg.png"
            alt="voice-search-icon"
          />
        </div>
        <div class="btn-cont">
          <button class="custom-btn">Google Search</button>
          <button class="custom-btn custom-btn-l">I'm Feeling Lucky</button>
        </div>
        <span class="s-lang"
          >Google offered in:
          <a href="#" class="s-link"
            ><div class="ll">Español (Latinoamérica)</div></a
          >
        </span>
      </section>
    </main>
    <footer>
      <div class="footer-cont">
        <div class="footer1">
          <span class="f1">Colombia</span>
        </div>
        <div class="footer2">
          <div class="a-li">
            <a href="">About</a>
            <a href="">Advertising</a>
            <a href="">Business</a>
            <a href="">How Search works</a>
          </div>
        </div>
        <div class="footer3">
          <a href="">Privacy</a>
          <a href="">Terms</a>
          <a href="">Settings</a>
        </div>
      </div>
    </footer>
  </body>
</html>

Ответ №1:

попробуйте изменить ширину на 100vw и. вы можете использовать гибкий ящик для нижнего колонтитула 2 и нижнего колонтитула 3. таким образом, код будет :

 <footer>
    <div class="footer-cont">
        <div class="top-footer">
          <span class="f1">Colombia</span>
        </div>
        <div class="bottom-footer">
          <div class="left-footer">
           <div class="a-li">
            <a href="">About</a>
            <a href="">Advertising</a>
            <a href="">Business</a>
            <a href="">How Search works</a>
          </div>
          </div>
        <div class="right-footer">
          <a href="">Privacy</a>
          <a href="">Terms</a>
          <a href="">Settings</a>
        </div>
       </div>
      </div>
    </footer>

и css будет :

 footer{
  position : relative;
  width: 100vw;
}

.footer-cont{
 position: absolute;
 width : 100%;
 bottom : 0;
 left : 0;
 height : fit-content;
 height : -moz-fit-content;
}

.top-footer{
 border-bottom : 1px solid #333;
}

.bottom-footer{
 display : flex;
 justify-content : space-between
 align-items : center;
}

Комментарии:

1. Здравствуйте, к сожалению, это не сработало :/ он просто немного сдвинул нижний колонтитул, но он не прилипает к концу, вы можете проверить это: diefonro.github.io/HTML-CSS

Метки: