Как я могу горизонтально развернуть мой div нижнего колонтитула? - PullRequest
Новая
       3

Как я могу горизонтально развернуть мой div нижнего колонтитула?

1 голос
/ 23 апреля 2020

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

HTML

<div id=footer>
     NewCom France Copyright &copy 2020  
</div>

CSS

#footer {
          padding: 12px;
          background-color: #999999;
          text-align: center;
          position: fixed;
          bottom: 0;
          text-align: center;
          margin: 0 auto;
          line-height: auto;
}

Ответы [ 3 ]

0 голосов
/ 23 апреля 2020

Достаточно ли контента, чтобы заполнить 100vh? Вы можете просто установить нижний колонтитул, чтобы заполнить это пространство, если нет, или установить ваше тело height или min-height

Я рекомендую макет flexbox, где нижний колонтитул не раскрывается, а скорее основное содержание, но вот что Вы ищете: 

body {
  display: flex;
  flex-direction: column;
  background-color: gray;
  height: 100vh;
  margin: 0;
  padding: 0;
}

header {
  background-color: red;
}

main {
  background-color: blue;
}

footer {
  flex: 1 auto;
  background-color: green;
}
<body>
  <header>
    <p>Hi in the header</p>
  </header>
  <main>
    <p>Hi in the main</p>
  </main>
  <footer>
    <p>Hi in the footer</p>
  </footer>
</body>
0 голосов
/ 23 апреля 2020

Маржа на элементе с фиксированной позицией ничего не делает, и маржа на body также не повлияет на это, так как position: fixed позиционирует элемент относительно области просмотра , вне потока любого другие элементы.

Для обеспечения полной ширины элемент фиксированной позиции должен иметь свои свойства right и left. 

#footer {
  /* positioning */
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;

  /* other styling */
  background-color: #999999;
  line-height: auto;
  padding: 12px;
  text-align: center;
}

Как примечание стороны, у вас есть дубликаты text-align: center значений в ваших исходных CSS.

Упорядочении ваших CSS свойств в согласованном порядке (например, мне нравится алфавитизировать мои CSS свойства, но в Приведенный выше пример также сгруппировал их по типу), что поможет вам избежать потенциально труднодоступных ошибок или дублирующих свойств.

0 голосов
/ 23 апреля 2020

Вы можете добавить width:100%;: 

#footer{
     padding: 12px;
     background-color: #999999;
     text-align: center;
     position: fixed;
     bottom: 0;
     text-align: center;
     margin: 0 auto;
     line-height: auto;
     width:100%;
}
<div id=footer>NewCom France Copyright &copy 2020</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...