Div нижнего колонтитула не распространяется на всю длину Div - PullRequest
Новая
       16

Div нижнего колонтитула не распространяется на всю длину Div

0 голосов
/ 21 февраля 2019

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

enter image description here Я пытаюсь получить тег <hr>, чтобы увеличить ширину столбца.Для справки я использую инфраструктуру MaterializeCSS для контейнеров, строк и столбцов.

Код

HTML: 

<div class="container">
  <div class="row"><!-- Other Content --></div>
  <div class="row"><!-- Other Content --></div>
  <div class="row"><!-- Other Content --></div>
  <div class="footer-message">
    <hr>
    Made with <span style="color: #e25555;">&hearts;</span> by Adam
  </div>
</div>

CSS: 

.footer-message{
  position:absolute;
  width: 100%;
  padding:5px;
  bottom:0px;
}

Я использую абсолютную позицию, чтобы выровнять ее по нижней части экрана, и я установил ширину равной 100%, так как я понимаю, что она будет наследовать ширину родительского элемента, которыйв данном случае это div с классом container.

Что я делаю не так?Заранее спасибо!

Редактировать: Старый скриншот Problem screenshot

Ответы [ 4 ]

0 голосов
/ 26 февраля 2019

Я пытался воспроизвести его, но ваш код без CSS работает нормально для меня.Я не уверен, что вы хотите, чтобы <hr> заполнял всю ширину только шириной контейнера. 

<!DOCTYPE html>
<html>

<head>
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
  <main>
    <div class="container">
      <div class="row">
        <!-- Other Content -->
      </div>
      <div class="row">
        <!-- Other Content -->
      </div>
      <div class="row">
        <!-- Other Content -->
      </div>
      <div class="footer-message">
        <hr>
        Made with <span style="color: #e25555;">&hearts;</span> by Adam
      </div>
    </div>
  </main>
  <footer>
  </footer>


  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</body>

</html>
0 голосов
/ 21 февраля 2019

Я бы использовал CSS Grid для этого, смотрите следующий фрагмент: 

html,
body {
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
}

article {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
}

header {
  background: #5170a9;
  color: white;
  padding: 1rem;
}

main {
  color: #444;
  padding: 1rem;
}

footer {
  background: #182f58;
  color: white;
  padding: 1rem;
}
<article>
  <header>
    Page Header
  </header>
  <main>
   Hi, there's not much content, yet. You can write in here to expand the container.
  </main>
  <footer>
    All rights reversed.
    <br>
    I am always at the bottom of the page
  </footer>
</article>
0 голосов
/ 25 февраля 2019

создайте нижний колонтитул, как в примере материализации документации: https://materializecss.com/footer.html

  <footer class="page-footer">
    <div class="footer-copyright">
      <div class="container">
        © 2014 Copyright Text
      </div>
    </div>
  </footer>
0 голосов
/ 21 февраля 2019

Добавьте position: relative в Контейнер, затем добавьте left: 0; right: 0 в footer-message класс.Надеюсь, это поможет

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

Похожие темы

...