Блог

Я ищу возможность установить нижний колонтитул в конец моей страницы или в конец моего содержимого, если содержимое больше одной страницы. Я не хочу иметь фиксированный нижний колонтитул, в котором содержимое можно прокручивать. Я не знаю, возможно ли это.

Итак, это мой код. Div с class=»div1″ содержит содержимое. Содержимое содержит содержимое, а также нижний колонтитул.

 
<div class="div1">
   <div class="content">
      <div class="myContent"></div>
      <div class="myContent"></div>
      <div class="myContent"></div>
      <div class="footer"></div>
   </div>
</div>
  

Нижний колонтитул имеет высоту 50 пикселей.
Моя проблема заключается в следующем:
Если у меня есть высота экрана с height: 500px, а высота содержимого составляет всего 150px, нижний колонтитул устанавливается после последнего div-элемента с class =»MyContent».
Он должен быть установлен в конец страницы, как эффект, который я получаю с

 bottom:0;position:fixed  

Но если высота содержимого составляет 600 пикселей, нижний колонтитул должен быть установлен сразу после последнего div с class=»MyContent». Здесь не понадобятся стили.

У вас есть идея, как это решить?

вы имеете в виду прикрепить нижний колонтитул к нижней части страницы? или этот один

css

 html, body {height: 100%;}

#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;} 
  

и html

 <div id="wrap">

    <div id="main">

    </div>

</div>

<div id="footer">

</div>
  

Я думаю, это может помочь вам избавиться от этой проблемы:

 .footer {position:absolute;left:0;right:0;bottom:0;background:green;height:50px}
  

Это может решить задачу:

 <div style="position:absolute">
    <div style="position:absolute">
        <div id="top" style="height:50px;width:100%;position:fixed;left:0;top:0;background:red"> content 1 </div>
        <div id="middle" style="background:green;position:fixed;top:50px; left:0;bottom:50px;right:0">content 2 </div>
        <div id="middle" style="background:blue;position:fixed;top:100px; left:0;bottom:50px;right:0">content 3 </div>
        <div id="bottom" style="height:50px;width:100%;position:fixed;left:0;bottom:0;background:orange">Footer</div>
    </div>
</div>