Используйте CSS, чтобы сделать полную высоту контейнера в нижнем колонтитуле

#html #css

#HTML #css

Вопрос:

У меня есть нижний колонтитул с моим списком навигации. При наведении курсора я хотел бы изменить цвет фона всей высоты div. Как и сейчас, только фон вокруг текста меняет цвет. Я попытался добавить к тексту верхний и нижний отступы, но это не дает нужного эффекта, который я ищу. Есть ли способ сделать <a> 100% высоты содержащего нижний колонтитул div?

Код ниже:

 footer {
  width: 100%;
  background: #222;
  color: #fff;
  margin: 0;
  position:fixed;
  left:0px;
  bottom:0px;
}

.footer-navigation {
  width: 60%;
  display: flex;
  align-items: center;
}

.footer-links-holder {
  width: 25%;
  position: relative;
  float: left;
  margin: 0;
}

.footer-links-holder:hover {
  background-color: #444;
  transition: 0.5s;
}

 <div class="footer-navigation">
  <a class="footer-links-holder" href=""><h3>About Me</h3></a>
  <a class="footer-links-holder" href=""><h3>Photography</h3></a>
  <a class="footer-links-holder" href=""><h3>Portfolio</h3></a>
  <a class="footer-links-holder" href=""><h3>Back to Top</h3></a>
</div>

Кто-нибудь может помочь? Я искал и, похоже, не могу найти простого решения.

РЕДАКТИРОВАТЬ: вот ссылка на jfiddle https://jsfiddle.net/adamdrover/qe2d318L /

1. Вы хотите, чтобы вся ширина div меняла цвет? Похоже, вам просто нужна ширина самого якоря, и это, похоже, работает здесь: jsfiddle.net/zd179hek

2. Не комбинируйте flexbox и floating, в этом мало смысла.

3. Спасибо. Это удалено, но это не решает мою проблему…

Ответ №1:

Вам нужно сделать ваши ссылки в нижнем колонтитуле «отображать: блок», и тогда он будет принимать значения ширины и высоты.

 .footer-links {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

1. Извините, я только что понял, что удалил этот класс из своего html и забыл удалить стиль. Кроме того, я попытался добавить display: block; в мой класс footer-links-holder , и это тоже не сработало.

Ответ №2:

https://jsfiddle.net/qe2d318L/1/

Я удалил flex правила из .footer-contact и .footer-navigation , вместо этого установил их в a , ссылка стала полной высотой:

 .footer-contact a,
.footer-navigation a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

 body {

  background: #348F50; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #348F50 , #56B4D3); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #348F50 , #56B4D3); /* W3C, IE 10 / Edge, Firefox 16 , Chrome 26 , Opera 12 , Safari 7  */

  margin: 0;
}

.clearfix:before, .clearfix:after {
  clear: both;
}

footer {
  width: 100%;
  background: #222;
  color: #fff;
  margin: 0;
  position:fixed;
  left:0px;
  bottom:0px;
}
.centered {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.footer-logo {
  width: 20%;
}
.logo {
  padding: 30px 20px 10px 20px;
  max-width: 100%;
}
.footer-contact {
  width: 15%;
  /*align-items: center;
  justify-content: center;
  display: flex;*/
}

h3 {
  margin: 0;
  text-align: center;
}

.footer-contact a,
.footer-navigation a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.footer-navigation {
  width: 60%;
  /*display: flex;
  align-items: center;*/
}

.footer-links-holder {
  display: block;
  width: 25%;
  position: relative;
  float: left;
  margin: 0;
}

.footer-links-holder:hover {
  background-color: #444;
  transition: 0.5s;
}

.bottom-bar {
  position: relative;
  text-align: center;
  font-size: .8em;
  text-transform: uppercase;
  background: #000;
  padding: 15px 0;
}

 <footer>

  <!-- include slogan, contact me form on web, contact button on mobile. Social media links on right. -->

  <div class="centered clearfix">
    <div class="footer-logo">
      <img class="logo" src="images/laptop-logo.png">
      <div class="social">
        <a href="https://www.facebook.com/" class="facebook">
        </a>
        <a href="https://twitter.com/" class="twitter">
        </a>
        <a href="https://www.linkedin.com/" class="linkedin">
        </a>
      </div>
    </div>
    <div class="footer-contact">
      <a href=""><h3>Contact Me</h3></a>
    </div>
    <div class="footer-navigation">
      <a class="footer-links-holder" href=""><h3>About Me</h3></a>
      <a class="footer-links-holder" href=""><h3>Photography</h3></a>
      <a class="footer-links-holder" href=""><h3>Portfolio</h3></a>
      <a class="footer-links-holder" href=""><h3>Back to Top</h3></a>
    </div>
  </div>
  <div class="bottom-bar">
    All Rights Reserved © 2016 | <a href="">Privacy Policy</a>
  </div>

</footer>