Почему мой нижний колонтитул не находится внизу страницы? - PullRequest
Новая
       1

Почему мой нижний колонтитул не находится внизу страницы?

0 голосов
/ 15 марта 2020

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

Я просмотрел видео и попытался выполнить следующие действия. вместе, но, похоже, ничего не работает.

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

body {
  margin: 0;
  padding: 0;
  background: #004882;
  height: 100px;
  display: flex;
  flex-direction: column;
}

html {
  height: 100px;
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 150px;
  display: black;
  background-color: #101010
  /* A lot of the information I got for making the header I got from this youtube video
    	https://www.youtube.com/watch?v=GxwHXxumdQk
    	*/
}

.logo {
  height: 100%;
  display: table;
  float: left;
}

.logo h1 {
  color: white;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-family: "Lucida Console", Courier, monospace;
  font-size: 50px;
}

.logo h3 {
  color: white;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-family: "Lucida Console", Courier, monospace;
}

.navigation {
  float: right;
  height: 100%;
}

.navigation a {
  height: 100%;
  display: table;
  ;
  float: left;
  padding: 0px 20px;
}

.drop-down {
  display: table-cell;
  vertical-align: middle;
  ;
  height: 100%;
  color: white;
  font-family: monospace;
  background-color: gray;
  font-size: 20px;
}

.drop-down select {
  font-family: monospace;
  font-weight: bold;
  font-style: italic;
  font-size: 15px;
}

.drop-down button {
  font-family: monospace;
  background-color: gray;
  color: white;
  font-size: 20px;
}

.drop-down button:hover {
  background-color: #008B8B;
}

img {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  min-height: 100%;
}

.planets img {
  height: 300px;
  width: 300px;
}


/* I got some info on arranging the layout of the 
    imgaes from here
    https://stackoverflow.com/questions/12813573/position-icons-into-circle
    */

.planets {
  position: relative;
  width: 24em;
  height: 24em;
  padding: 2.8em;
  border: dashed 1px;
  border-radius: 50%;
  margin: 1.75em auto 0;
  flex: 1;
}

.planets a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4em;
  height: 4em;
  margin: -2em;
}

#footer {
  position: absolute;
  left: 0;
  height: 100px;
  width: 100%;
  background: black;
  color: white;
}
<div class="header">
  <div class="logo">
    <h1>Neighbors from Space</h1>
    <br>
    <h3> Created by Evan O'Grady</h3>
  </div>

</div>

<nav class="drop-down">
  <button type="button">About</button>

  <label for="planets-nav"><strong>Planets: </strong></label>
  <select id="planets">
    <option value="Mercury">Mercury</option>
    <option value="Venus">Venus</option>
    <option value="Earth">Earth</option>
    <option value="Mars">Mars</option>
    <option value="Jupiter">Jupiter</option>
    <option value="Saturn">Saturn</option>
    <option value="Uranus">Uranus</option>
    <option value="Neptune">Neptune</option>
  </select>

  <label for="references"><strong>References for: </strong></label>
  <select id="references">
    <option value="Mercury">Mercury</option>
    <option value="Venus">Venus</option>
    <option value="Earth">Earth</option>
    <option value="Mars">Mars</option>
    <option value="Jupiter">Jupiter</option>
    <option value="Saturn">Saturn</option>
    <option value="Uranus">Uranus</option>
    <option value="Neptune">Neptune</option>
  </select>



  <label for="contact"><strong>Contact: </strong></label>
  <select id="contact">
    <option value="email">Email</option>
    <option value="linkedin">LinkedIn</option>
    <option value="github">GitHub</option>
  </select>

</nav>

<section class="planets">
  <img src="C:\Users\evano\Downloads\Mercury.jpg" alt="Mercury">
  <img src="C:\Users\evano\Downloads\Venus.jpg" alt="Venus">
  <img src="C:\Users\evano\Downloads\Earth.jpg" alt="Earth">
  <img src="C:\Users\evano\Downloads\Mars.jpg" alt="Mars">
  <img src="C:\Users\evano\Downloads\Jupiter.jpg" alt="Jupiter">
  <img src="C:\Users\evano\Downloads\Saturn.jpeg" alt="Saturn">
  <img src="C:\Users\evano\Downloads\Uranus.jpg" alt="Uranus">
  <img src="C:\Users\evano\Downloads\Neptune.jpg" alt="Neptune">
</section>

<footer id="footer">
  <h1>This is a footer</h1>
</footer>


<!-- The info I get for making the footer is from this youtube video
    		https://www.youtube.com/watch?v=KUHrMzN7ey8
    	-->

Ответы [ 4 ]

1 голос
/ 15 марта 2020

Добавьте bottom: 0; в селектор нижнего колонтитула в CSS: 

#footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: black;
    color: white;
}
0 голосов
/ 15 марта 2020

попробуй дать положение тела: относительное

0 голосов
/ 15 марта 2020

У вас есть CSS свойства, которые переопределяют пассивное поведение, которое позволяет flex сгибать нижний колонтитул. Чтобы решить эту проблему, поместите все, что не является вашим нижним колонтитулом, внутри div-оболочки, а затем добавьте правило CSS, чтобы установить для свойства flex этой оболочки значение 1, и удалите все лишние правила position: absolute и отобразите Типы.

Если вам нужен липкий нижний колонтитул, который всегда будет прилипать к нижней части окна браузера, это немного другое. Это просто для того, чтобы поместить нижний колонтитул внизу содержимого для пояснения. 

<html>
<head>
    ...
</head>
<body> <!-- display: flex -->
    <div id="wrapper"> <!-- flex: 1 -->
        ...
    </div>
    <footer id="footer"> <!-- no extra rules required -->
        ...
    </footer>
</body>
</html>

Fiddle: https://jsfiddle.net/cxzpdkh2/

0 голосов
/ 15 марта 2020

Поскольку вы задали display: flex для тела, вы также можете использовать возможности flexbox и использовать align-self в нижнем колонтитуле: 

#footer {
        height: 100px;
        width: 100%;
        background: black;
        color: white;
        align-self: flex-end;
    }

Он поддерживается во всех современных браузерах. Если вам нужно работать с более старыми браузерами, вам, возможно, придется придерживаться позиции: абсолютный и нижний: 0 для # нижнего колонтитула.

Также ваш html и тело установлены на высоту 100px, что делает их меньше, чем ваш содержание. Попробуйте установить их на 100% высоты. : -)

...