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

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

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

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

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

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

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

UPD:

Я также пробовал некоторые display:inline-block; vertical-align:bottom; вещи до сих пор никакого результата.

UPD2:

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

источник

2013-07-08 sander

Я думаю, вы ищете липкий нижний колонтитул. –

Если вы действительно ищете липкий нижний колонтитул, попробуйте это - http://mystrd.at/modern-clean-css-sticky-footer/. Самое лучшее решение пока – jQuery00

Я haven «встретил любые« липкие нижние колонтитулы »без позиции: фиксированные или постинги: абсолютные. Мне интересно, если они есть. – sander

#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/ - position: fixed; это очевидный способ сделать это, и если это повлияет на ваш макет, попробуйте опубликовать свои проблемы здесь. Было бы проще изменить CSS вашего контента, чем пытаться найти другой способ сделать это.

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

EDIT Прочитайте ваши изменения, пожалуйста, забыть выше. Чтобы застрять в нижней части тела, было бы легко поместить его в свой HTML. Это простой материал, пожалуйста, отправьте пример кода, если вам нужна дополнительная помощь. Позиционирование чего-то внизу страницы, по умолчанию, расположено в нижней части страницы.

JSFiddle: http://jsfiddle.net/TAQ4d/ если действительно действительно это необходимо.

источник

2013-07-08 07:36:29

Постараюсь объяснить: 1) взять код из моего вопроса.2) Изменить позицию: относительно позиции: абсолютная. #test придерживается нижней части тела, это хорошо. 3) Добавьте стиль «height: 3000px» в # test. Он все еще находится на дне тела (хорошо), но тело все еще 2000px и 1000px #test скрыто над телом (это плохо); – sander

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

EDIT
это plgin usese фиксированное положение тоже!
тогда я думаю, вы должны записать его самостоятельно или есть кто-то, чтобы написать это для вас: D

источник

2013-07-08 07:39:48 Homam

Я боялся этого. Теперь мне нужно будет добавить больше вычислений в js. – sander

, и насколько я знаю, нет ничего подобного – Homam

@sander можно использовать html5 и css3. проверьте мой ответ. –

если и не хотите использовать position:absolute; left:0; bottom:0; то и может попытаться просто margin-top:300px; ...

источник

2013-07-08 08:20:04

Вот что я буду делать сейчас. Пока высота #test изменяется динамически, мне нужно будет сделать это с помощью JS. – sander

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

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 */ 
}

источник

2013-07-08 08:27:34

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

Укажите, что высота нижнего колонтитула составляет 40px. Ваш контейнер - 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); 
}

Live example here

Надеется, что это помогает.

источник

2015-02-06 12:20:43

Из-за динамического характера высоты #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>

источник

2015-04-22 05:53:12 Durthar

Да это Posiible с 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; 
}

источник

2016-04-21 08:23:08 CHlM3RA

-1

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

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 элемента контента в соответствии с разрешением экрана.

источник

2016-05-12 10:38:24

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

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

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

источник

2016-06-16 13:58:54

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

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

источник

2017-07-02 10:00:45

-1

Старый пост, я знаю, но еще одним решением было бы создать оболочку для содержимого с минимальной высотой 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; 
}

источник

2017-08-24 22:46:07 user2625636

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

ответ

Смежные вопросы