HTML: проблема ширины нижнего колонтитула - PullRequest
Новая
       24

HTML: проблема ширины нижнего колонтитула

1 голос
/ 28 января 2020

моя веб-страница полностью в порядке, у меня есть только одна проблема: моя веб-страница содержит «нижний колонтитул», но я хочу показывать его каждый раз в небольшом баре внизу моей страницы (не только если я прокручиваю вниз до конец моей страницы). Я установил z-index на 1 (так, чтобы он был перед всеми остальными вещами), а также дал ему цвет фона. Но по какой-то причине он находится в нижнем левом углу и очень маленький, я пытался установить ширину до 100%, но по какой-то причине это ничего не изменило. вот мой html код: 

.footer-links{
  z-index: 1; 
}

.footer-links ul{
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none; 
  position: fixed;
  bottom: 0;
}

.footer-links ul li a{
  width: 100%;
  padding: 0;
  color: white;
  text-decoration: none; 
  font-size: 14px;
  background-color: black;
} 
 <!-- Footer -->
<div class="footer-links">
  <ul>
    <li><a href="text3.html">text3</a></li>
    <li><a href="text2.html">text2</a></li>
    <li><a href="text1.html">text1</a></li>
  </ul>
</div>

Ответы [ 4 ]

1 голос
/ 28 января 2020

Если вы хотите иметь фиксированный нижний колонтитул, вы можете использовать:

Для нижнего колонтитула: 

#footer {
    position: fixed;
    height: 50px;
    background-color: red;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
}

Для вашего тела: 

body {
    margin-bottom:50px;
}
1 голос
/ 28 января 2020

Вам необходимо установить width и background-color в .footer-links ul и установить левую границу на .footer-links

.footer-links{
  width: 100%;
  position: absolute;
  background-color: black;
  bottom: 0px;
  left:0;
}

.footer-links ul{
  width: 100%;
  background-color: black;
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none; 
  position: fixed;
  bottom: 0;
}

.footer-links ul li a{
  padding: 0;
  color: white;
  text-decoration: none; 
  font-size: 14px;
  background-color: black;
} 
<div class="footer-links">
  <ul>
    <li><a href="text3.html">text3</a></li>
    <li><a href="text2.html">text2</a></li>
    <li><a href="text1.html">text1</a></li>
  </ul>
</div>
0 голосов
/ 28 января 2020

Как то так? JSFiddle: https://jsfiddle.net/4waLb0qu/

HTML код: 

<div class="content">
<p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p>
<div class="footer-links">
  <ul>
    <li><a href="text3.html">text3</a></li>
    <li><a href="text2.html">text2</a></li>
    <li><a href="text1.html">text1</a></li>
  </ul>
</div>
</div>

CSS: 

.content {
  height: 100px;
  float: left;
  position: relative;
  width: 100%;
}

.footer-links{
  width: 100%;
  background-color: red;
  position: fixed;
  height: 35px;
  bottom: 0;
}

.footer-links ul{
  list-style: none;
}

.footer-links ul li a{
  padding: 0;
  color: white;
  text-decoration: none;
  font-size: 14px;
  background-color: black;
  float: left;
}
0 голосов
/ 28 января 2020

Я рекомендую вам внести некоторые изменения в ваш CSS, так как происходит много ненужного форматирования. Вот мое предложение: 

.footer-links{
  background-color: black;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.footer-links ul{
  display: flex;
  list-style: none; 
}

.footer-links ul li a{
  padding: 0;
  text-decoration: none;
  color: white;
  font-size: 14px;
} 
<div class="footer-links">
  <ul>
    <li><a href="text3.html">text3</a></li>
    <li><a href="text2.html">text2</a></li>
    <li><a href="text1.html">text1</a></li>
  </ul>
</div>
...