代码

Question

我正在尝试为我的简单网页创建页脚，并且在元素上遇到了一些麻烦，该元素超出了容器边缘的范围。我认为这是宽度问题。

我正在尝试获取<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的{1}}。

我在做什么错？预先谢谢你！

编辑：旧屏幕截图

Answer 1

将left: 0; right: 0添加到容器，然后将footer-message添加到public Class MyViewModel:INotifyPropertyChanged:IDataErrorInfo { public PhysicalValue Target {get => _target; set => {_target = value; NotifyPropertyChanged("Target");}} public string this[string columnName] { get { if (columnName == "Target") { if(_target.Value>5000){ return "out of spec value"; } } return String.Empty; } } }类。希望对您有帮助

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的整个长度

代码

4 个答案: