时间戳

首页 > 解决方案 > 如何使页脚停留在内容的末尾（metro-ui）

html - 如何使页脚停留在内容的末尾（metro-ui）

问题描述

我有这个代码：

<head>
  <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
</head>
<body style="height:100%">
  <div class="grid fluid" style="background:yellow; padding:5px; display:inline-block; height:100%">
    <div class="row" style="background:green;  ">
      <div class="span2" style="background:red; margin-right:10px; display:inline-block;">
        <h1>Menu</h1>
        <h1>Menu</h1>
        <h1>Menu</h1>
      </div>
      <div class="span10" style="background:darkgreen; display:inline-block; height:100%">
        <div  id="Contenido" style="height:300px;">
          <h1>Contenido</h1>
          <h1>Contenido</h1>
          <h1>Contenido</h1>
          <h1>Contenido</h1>
          <h1>Contenido</h1>
          <h1>Contenido</h1>
          <h1>Contenido</h1>
        </div>
      </div>
    </div>
    <div class="row" style="background:grey; bottom:0px;">
      esto es un pie de pagina esto es un pie de pagina esto es un pie de pagina
    </div>
  </div>
</body>

我希望页脚保持在内容的末尾，但内容大于其 div（ID="Contenido"），我无法移动此 div 或其高度，因为我有很多具有该高度的窗口，但我可以移动模板，所以我想要一个解决方案，使页脚保持在内容的末尾而不移动 ID="Contenido" 的 div。

我尝试在页脚上使用“bottom:0px”，在容器上使用“display:inline-block”，但这不起作用

标签： htmlcssmetro-ui-css

解决方案

尝试将您的高度属性 ( <div id="Contenido style="height:300px;">) 300px 更改为 475px

推荐阅读