Почему мой нижний колонтитул исчезает, когда я удаляю границу из содержимого центра

avatar
Diana C
8 августа 2021 в 16:46
79
1
0

Я только начал учиться программировать.

Я попытался воспроизвести домашнюю страницу Google в рамках онлайн-курса. Это HTML и CSS, однако я столкнулся со следующей проблемой.

Контекст: я добавил границу в CSS для себя, чтобы видеть, где и сколько места занимает центр.

Вот фрагмент кода:

body,
html {
  background-color: white;
  font-size: 1em;
  width: 100%;
  max-width: 2400px;
  max-height: 100vh;
  margin: 0px;
  font-family: Arial, Helvetica, sans-serif;
  height: 100vh;
  position: fixed;
}

.navigation {
  list-style: none;
  overflow: hidden;
  width: 100%;
  background-color: white;
  height: 8vh;
  display: block;
  text-align: right;
}

.navigation li {
  display: inline-block;
  font-size: .9em;
}

.navigation li a {
  padding: 7px;
  text-decoration: none;
  color: black;
  justify-content: center;
}

.navigation li a:hover {
  cursor: pointer;
  text-decoration: underline;
}

.navimage {
  border-radius: 50%;
  border: 5px solid transparent;
}

#user-image {
  margin-right: 1em;
}

.navimage:hover {
  border-color: #E8E8E8;
  cursor: pointer;
}

.center {
  width: 100%;
  height: 84vh;
  text-align: center;
  border: 1px solid green;
}

.google-logo {
  margin-top: 10em;
  margin-bottom: 1em;
}

.search input {
  margin-top: 1em;
  margin-bottom: 1em;
  border: 2px solid #d3d3d3;
  width: 28%;
  height: 40px;
  border-radius: 30px;
  font-size: 1.4em;
  padding-left: 50px;
  padding-right: 40px;
  color: black;
}

input:hover {
  box-shadow: 3px violet;
}

#magnifier-glass {
  position: absolute;
  margin-top: 36px;
  margin-left: 20px;
}

#microphone {
  position: absolute;
  margin-top: 36px;
  margin-left: -36px;
}

#lucky {
  width: 100%;
}

.btn {
  background-color: #f0f0f0;
  width: 8%;
  height: 40px;
  border-radius: 5px;
  margin: 10px;
  border-color: transparent;
  font-size: 15px;
}

.btn:hover {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  cursor: pointer;
}

footer {
  width: 100%;
  height: 8vh;
  justify-content: space-between;
  background-color: #E8E8E8;
  display: flex;
  position: fixed;
  z-index: 1;
  border: 1px solid red;
}

footer ul {
  list-style: none;
}

footer ul li {
  display: inline-block;
  margin: 5px;
  padding-top: 25px;
}

footer ul li a {
  text-decoration: none;
  font-size: 1em;
  color: #686868;
}

footer ul li a:hover {
  text-decoration: underline;
}

.footer-right {
  margin-right: 30px !important;
}

.footer-left {
  margin-left: -15px !important;
}
<!DOCTYPE html>
<html lang="eng">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/png" href="images/title-logo.png">
  <title>Google</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <!-- NAVBAR-->
  <header>
    <navbar class="navigation">
      <ul>
        <li>
          <a href="http://gmail.com">Gmail</a>
        </li>
        <li>
          <a href="https://www.google.nl/imghp?hl=en&tab=ri&ogbl">Images</a>
        </li>
        <li>
          <img class="navimage" width="30" style="vertical-align:middle" src="images/Apps-Google-Chrome-App-List-icon.png">
        </li>
        <li>
          <img id="user-image" class="navimage" width="30" style="vertical-align:middle" src="images/userimage.jpg">
        </li>
      </ul>
    </navbar>
  </header>
  <!-- SEARCH BAR / MAIN PAGE-->
  <div class="center">
    <div class="google-logo">
      <img src="images/googlelogo_color_272x92dp.png">
    </div>

    <div class="search">
      <i id="magnifier-glass" class="fa fa-search" aria-hidden="true"></i>
      <input type="text" class="searchGoogle" placeholder="">
      <i id="microphone" class="fa fa-microphone" aria-hidden="true"></i>
    </div>

    <div id="lucky">
      <button class="btn" type="button">Google Search</button>
      <button class="btn" type="button">I'm Feeling Lucky</button>
    </div>
  </div>
  <!--FOOTER-->
  <footer>
    <ul class="footer-left">
      <li>
        <a href="#">About</a>
      </li>
      <li>
        <a href="#">Advertising</a>
      </li>
      <li>
        <a href="#">Business</a>
      </li>
      <li>
        <a href="#">How Search works</a>
      </li>
    </ul>
    <ul class="footer-right">
      <li>
        <a href="#">Privacy</a>
      </li>
      <li>
        <a href="#">Terms</a>
      </li>
      <li>
        <a href="#">Settings</a>
      </li>
    </ul>
  </footer>
</body>

</html>

Я знаю, что CSS, вероятно, плохой, так как он слишком большой.

Но меня больше всего беспокоит: почему нижний колонтитул исчезает, когда я удаляю границу из центрального блока?

Да, я пытался удалить и изменить, но не могу понять, что не так (кроме того, что я все делаю неправильно).

Спасибо за помощь.

Источник

Ответы (1)

avatar
Ozik Jarwo
8 августа 2021 в 17:14
0

Нижний колонтитул не исчезает, он просто опускается ниже и не появляется на экране, и вы не устанавливаете overflow:auto в body, чтобы его нельзя было увидеть при прокрутке.

Кстати, это вызвано полем .google-logo. Попробуйте удалить его.

Второй способ исправить это, см. этот пример. Я дал overflow:auto и немного поправил CSS для нижнего колонтитула, чтобы сделать его более аккуратным, удалив position и height.

.

body, html {
    background-color: white;
    font-size: 1em;
    width: 100%;
    max-width: 2400px;
    max-height: 100vh;
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
    height: 100vh;
    position: fixed;
    overflow: auto;
}

.navigation {
    list-style: none;
    overflow: hidden;
    width: 100%;
    background-color: white;
    height: 8vh;
    display: block;
    text-align: right;
}

.navigation li {
    display: inline-block; 
    font-size: .9em;

}
.navigation li a {  
    padding: 7px;
    text-decoration: none;
    color: black;
    justify-content: center;
}
.navigation li a:hover{
    cursor: pointer;
    text-decoration: underline;
}
.navimage {
    border-radius: 50%;
    border: 5px solid transparent;
}
#user-image{
    margin-right: 1em;
}
.navimage:hover {
    border-color: #E8E8E8;
    cursor: pointer;

}
.center {
    width: 100%;
    height: 84vh;
    text-align: center;

}
.google-logo {
    margin-top: 10em;
    margin-bottom: 1em;
}

.search input {
    margin-top: 1em;
    margin-bottom: 1em;
    border: 2px solid #d3d3d3;
    width: 28%;
    height: 40px;
    border-radius: 30px;
    font-size: 1.4em;
    padding-left: 50px;
    padding-right: 40px;
    color: black;
}

input:hover {
    box-shadow: 3px violet;
 
}
#magnifier-glass {
    position:absolute;
    margin-top: 36px;
    margin-left: 20px;
}
#microphone {
    position: absolute;
    margin-top: 36px;
    margin-left: -36px;
}

#lucky { 
    width: 100%;

}

.btn {
    background-color: #f0f0f0;
    width: 8%;
    height: 40px;
    border-radius: 5px;
    margin: 10px;
    border-color: transparent;
    font-size: 15px;
}

.btn:hover{
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    cursor: pointer;
}


footer {
    width: 100%;
    height: auto;
    justify-content: space-between;
    background-color: #E8E8E8; 
    display: flex;
    z-index: +1;
}

footer ul {
    list-style: none;

}
footer ul li {
    display: inline-block;
    margin: 5px;
    padding-top: 25px;

}
footer ul li a {
    text-decoration: none;
    font-size: 1em;
    color: #686868;
}
footer ul li a:hover{
    text-decoration: underline;
}
.footer-right {
    margin-right: 30px !important;
}
.footer-left {
    margin-left: -15px !important;
}
<html lang="eng"> 
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/png" href="images/title-logo.png">
     <title>Google</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
    <!-- NAVBAR-->
    <header>
    <navbar  class="navigation">
        <ul>
            <li>
               <a href="http://gmail.com">Gmail</a> 
            </li>
            <li>
                <a href="https://www.google.nl/imghp?hl=en&tab=ri&ogbl">Images</a>
            </li>
            <li>
                <img class="navimage" width="30" style="vertical-align:middle" src="images/Apps-Google-Chrome-App-List-icon.png">
            </li>
            <li>
                <img id="user-image"class="navimage" width="30" style="vertical-align:middle" src="images/userimage.jpg">
            </li>
        </ul>
    </navbar>
    </header>
<!-- SEARCH BAR / MAIN PAGE-->
<div  class="center">
    <div class="google-logo">
        <img src="images/googlelogo_color_272x92dp.png">
    </div>

    <div class="search">
        <i id="magnifier-glass" class="fa fa-search" aria-hidden="true"></i>
        <input type="text" class="searchGoogle" placeholder="">
        <i id="microphone" class="fa fa-microphone" aria-hidden="true"></i>
    </div>

    <div id="lucky">
        <button class="btn"  type="button">Google Search</button>
        <button class="btn"  type="button">I'm Feeling Lucky</button>
    </div>
</div>   
<!--FOOTER-->
<footer>
        <ul class="footer-left">
            <li>
                <a href="#">About</a>
            </li>
            <li> 
                <a href="#">Advertising</a>
            </li>
            <li>
                <a href="#">Business</a>
            </li>
            <li>
                <a href="#">How Search works</a>
            </li>
        </ul>
        <ul class="footer-right">
            <li>
                <a href="#">Privacy</a>
            </li>
            <li> 
                <a href="#">Terms</a>
            </li>
            <li>
                <a href="#">Settings</a>
            </li>
        </ul>
</footer>
</body>
</html>
Diana C
8 августа 2021 в 18:18
0

Привет, Озик, я удалил стиль CSS логотипа Google. теперь я должен выяснить, как исправить поднимающийся контент. спасибо, что помогли мне понять, что именно происходит.