установка нижнего колонтитула в конце содержимого или страниц - PullRequest
Новая
       1

установка нижнего колонтитула в конце содержимого или страниц

1 голос
/ 28 апреля 2011

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

Итак, это мой код. 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 пикселей. Моя проблема заключается в следующем: Если у меня высота экрана с высотой: 500px, а содержимое - только 150px, нижний колонтитул устанавливается после последнего элемента div с class = "myContent". Это должно быть установлено в конце страницы, как эффект, который я получаю с 

bottom:0;position:fixed
Но если содержимое имеет высоту 600px, нижний колонтитул должен быть установлен сразу после последнего div с class = "myContent". Здесь не нужно никаких стилей.

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

Ответы [ 2 ]

1 голос
/ 28 апреля 2011

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

.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>
1 голос
/ 28 апреля 2011

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

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