CODEWITHSUNDEEP
htmlcssmetro-ui-css
Omar
Omar

Reputation: 27

how can I make the footer stay at the end of the content (metro-ui)

I have this code:

<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>

I want the footer to stay at the end of the content, but the content is bigger than its div (ID="Contenido"), I cant move this div or its height because I have a lot of windows with that height, but I can move the template, so I want a solution that make the footer stay at the end of the content without move the div whith ID="Contenido".

I tried using "bottom:0px" on the footer and "display:inline-block" on the container, but that dont work

Upvotes: 0

Views: 258

Answers (2)

Reece00
Reece00

Reputation: 1

Try maybe changing your height attribute ( <div id="Contenido style="height:300px;"> ) 300px to 475px

Upvotes: 0

Aditya Thakur
Aditya Thakur

Reputation: 2610

Here try this, moving the div out and setting position absolute on it

<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>

Upvotes: 0

Related Questions