Question

我有此代码：

<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或它的高度，因为我有很多具有该高度的窗口，但是我可以移动模板，所以我想要一个解决方案，使页脚停留在内容的末尾而无需移动div，ID为“ Contenido”。

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

Answer 1

尝试将您的height属性（<div id="Contenido style="height:300px;">）从300px更改为475px

Answer 2

在此尝试，将div移出并在其上设置绝对位置

<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>
  <div class="row" style="background:grey; bottom:0px; position:absolute; bottom:-300px; width:100%;">
      esto es un pie de pagina esto es un pie de pagina esto es un pie de pagina
    </div>
</body>

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

2 个答案: