как сделать так, чтобы нижний колонтитул оставался в конце содержимого (metro-ui) - PullRequest
Новая
       19

как сделать так, чтобы нижний колонтитул оставался в конце содержимого (metro-ui)

0 голосов
/ 20 мая 2019

У меня есть этот код: 

<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 whith ID = "Contenido".

Я пытался использовать "bottom: 0px" в нижнем колонтитуле и "display: inline-block" на контейнере, но это не работает

Ответы [ 2 ]

0 голосов
/ 20 мая 2019

Здесь попробуйте это, переместив 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>
0 голосов
/ 20 мая 2019

Попробуйте, возможно, изменить атрибут высоты (<div id="Contenido style="height:300px;">) 300px на 475px

...