页脚Div不延长整个Div的长度

Question

我正在尝试为我的简单网页创建一个页脚，并且我遇到了一个元素的问题，这个元素过度扩展到容器的边缘。我认为这是宽度的问题。

我试图让<hr>标签扩展整个列的宽度。作为参考，我使用MaterializeCSS框架作为容器，行和列。

Code

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。

我究竟做错了什么？先感谢您！

编辑：旧截图

Answer 1

将position: relative添加到Container，然后将left: 0; right: 0添加到footer-message类。希望它有所帮助

Answer 2

我会使用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>

Answer 3

像物化文档示例中那样设置页脚：https://materializecss.com/footer.html

  <footer class="page-footer">
    <div class="footer-copyright">
      <div class="container">
        © 2014 Copyright Text
      </div>
    </div>
  </footer>

Answer 4

我试图重现它，但没有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>

页脚Div不延长整个Div的长度

问题描述投票：0回答：4

Code

4个回答

最新问题

页脚Div不延长整个Div的长度

问题描述 投票：0回答：4

Code

4个回答

最新问题

问题描述投票：0回答：4