0

我有这个代码：

<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”，但这不起作用

4

2 回答 2

0

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

于 2019-05-20T19:14:10.833 回答
0

在这里尝试一下，将 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>

于 2019-05-20T19:20:39.877 回答