Css позиция: относительная; придерживаться дна

<body style="min-height:2000px;">
    <div id="test" style="position:relative;bottom:0;">
         some dynamically changed content
    </div>
</body>

Что я ожидаю:
-Если высота #test больше или равна телу, она должна прилипать к дну (как это происходит сейчас cuz из блок-модели)
-Если высота #test меньше, чем тело, она должна, однако, придерживаться нижней части, имея над ней пробел. (чего не бывает, #test не прилипает к дну).

-Усиление : абсолютное неприемлемо, так как #test не будет влиять на рост тела, когда #test выше тела.
-Использование позиции : фиксированное неприемлемо, так как #test будет придерживаться нижней части окна, а не тела.

В: Могу ли я получить то, что ожидаю , используя только css? Как?

Извините за плохой английский, однако я думаю, что этот вопрос легко понять. Спасибо.

P.S.: Мне нужно это в css, потому что какое-то динамически измененное содержимое изменяется через js, и я хочу избежать повторного вычисления позиции div #test каждый раз, когда он изменяется.

UPD:

Я также пробовал какой-то материал display:inline-block; vertical-align:bottom;, по-прежнему не имеющий результата.

UPD2:

Спасибо, ребята, все же кажется, что самый простой способ - просто добавить пару строк в мой javascript, чтобы пересчитать высоту тела при изменении высоты #test.

ОТВЕТЫ

Ответ 1

Из-за динамического характера высоты #test вы не можете сделать это только с помощью CSS. Однако, если вы уже используете jQuery, быстрый вызов .height() должен быть в состоянии получить то, что вам нужно (высота #test должна быть вычтена из позиции 2000px сверху).

<style>
body {
    min-height: 2000px;
}

#test {
    position: relative;
    top: 2000px;
} 
</style>

<script>
var testHeight = $("#test").height();
$( "#test" ).css({
    margin-top: -testHeight;
});
</script>

Ответ 2

Я знаю, что это старый вопрос, но вы можете попробовать:

top: 100%;
transform: translateY(-100%);

Трансформация работает с размером самого элемента, поэтому она вернется к контейнеру в самом низу. Вы можете использовать буквы для всех трех осей.

Ответ 3

Только два метода pure-CSS для создания липкого нижнего колонтитула динамической высоты, которые я знаю, используют flexboxes (без поддержки в IE9-, к сожалению) и используя таблицы CSS:

html, body {
    height: 100%;    
    margin: 0;
}
body {
    display: table;
    width: 100%;
    min-height:2000px;
}
#test {
    display: table-footer-group;
    height: 1px; /* just to prevent proportional distribution of the height */
}

Ответ 4

#footer{
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    width:100%;
    background:#999;
}
/* IE6 */
* html #footer{
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

JSFiddle: http://jsfiddle.net/As3bP/ - позиция: исправлена; это очевидный способ сделать это, и если это повлияет на ваш макет, попробуйте опубликовать свои проблемы здесь. Было бы проще изменить CSS вашего контента, чем пытаться найти другой способ сделать это.

Выражение IE6 не подходит для скорости вообще, но оно работает, читайте об этом здесь: http://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-7-avoid-css-expressions-7202.html

ИЗМЕНИТЬ Прочитайте свои изменения, пожалуйста, забудьте об этом выше. Чтобы застрять в нижней части тела, было бы легко поместить его в свой HTML. Это простой материал, пожалуйста, отправьте пример кода, если вам нужна дополнительная помощь. Позиционирование чего-то внизу страницы, по умолчанию, расположено в нижней части страницы.

JSFiddle: http://jsfiddle.net/TAQ4d/, если вам это действительно нужно.

Ответ 5

Это очень возможно с использованием позиции relative. так вы это делаете.

Предположим, что высота вашего нижнего колонтитула будет 40 пикселей. Ваш контейнер relative, а нижний колонтитул также relative. Все, что вам нужно сделать, это добавить bottom: -webkit-calc(-100% + 40px);. ваш нижний колонтитул всегда будет внизу вашего контейнера.

HTML будет выглядеть следующим образом

<div class="container">
  <div class="footer"></div>
</div>

CSS будет выглядеть следующим образом

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.footer{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

Здесь показан живой пример

Надеюсь, это поможет.

Ответ 6

короткий ответ: Нет, вы не можете сделать это с чистым css, потому что это просто обратное направление к нормальному потоку страницы (ii означает нижнее кверху),
вы можете использовать этот плагин, который очень прост в использовании stickyjs;
используйте его с bottomSpacing: 0

ИЗМЕНИТЬ
это plgin usese фиксированное положение тоже!
то я думаю, вы должны записать его сами или кому-то написать его для вас: D

Ответ 7

Если вы не хотите использовать position:absolute; left:0; bottom:0;, тогда вы можете попробовать простую margin-top:300px;...

Ответ 8

Да, это возможно только с CSS:

HTML:

<body>
    <div id="test">
        some dynamically
        changed content
    </div>
</body>

CSS

body{
    line-height: 2000px;
}

#test{
    display: inline-block;
    vertical-align: bottom;
    line-height: initial;
}

JSFiddle

Если вы хотите получить текст в нижней части экрана, вы можете использовать:

body {
    line-height: 100vh;
    margin: 0px;
}

Ответ 9

вот решение, которое я придумал

<ul class="navbar">

    <li><a href="/themes-one/Welcome"> Welcome <i></i></a></li>
    <li><a href="/themes-one/Portfolio"> Portfolio <i></i></a></li>
    <li><a href="/themes-one/Services"> Services <i></i></a></li>
    <li><a href="/themes-one/Blogs"> Blogs <i></i></a><i class="arrow right"></i>
        <ul class="subMenu">
            <li><a href="/themes-one/Why-Did-Mint-Net-CMS-Born"> Why Did Mint Net CMS Born <i></i></a></li>
            <li><a href="/themes-one/Apply-AJAX-and-Mansory-in-gallery"> Apply AJAX and Mansory in gallery <i></i></a></li>
            <li><a href="/themes-one/Why-did-Minh-Vo-create-Mint-Net-CMS"> Why did Minh Vo create Mint Net CMS <i></i></a></li>
        </ul>
    </li>
    <li><a href="/themes-one/About"> About <i></i></a></li>
    <li><a href="/themes-one/Contact"> Contact <i></i></a></li>
    <li><a href="/themes-one/Estimate"> Estimate <i></i></a></li>


</ul>

<style>

    .navbar {
        display: block;
        background-color: red;
        height: 100px;
    }

    li {
        display: table-cell;
        vertical-align: bottom;
        height: 100px;
        background-color: antiquewhite;
        line-height: 100px;
    }

    li > a {
        display: inline-block;
        vertical-align: bottom;
        line-height:initial;
    }

    li >ul {
        display: none;
    }


</style>

Ответ 10

Мы делаем так:

Html:

<body>
   <div id="bodyDiv">
      <!-- web site content is here -->
   </div>
</body>
<footer>
   <!-- Footer content is here -->
</footer>

Jquery:

$( document ).ready(function() 
{
   $('#bodyDiv').css("min-height",screen.height);
});`

динамически изменять атрибут min-height элемента контента в соответствии с разрешением экрана.

Ответ 11

Старый пост, я знаю, но еще одним решением было бы создать обертку для вашего контента с минимальной высотой 100vh - footerHeight это решение требует, чтобы вы знали высоту нижнего колонтитула...

<body>
  <div class="wrapper">
    your content
  </div>
  <div class="footer">
    footer content
  </div>
</body>

и ваш css будет выглядеть так:

.wrapper {
  min-height: calc( 100vh - 2em );
}
.footer {
  height: 2em;
}