Футер к низу страницы простой пример

ObjectOne > CSS > Футер к низу страницы простой пример

Футер к низу страницы простой пример

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

Посмотреть пример

А так же ссылка на реализацию от bootstrap

<style>

	html {
		position: relative;
		min-height: 100%;
	}
	body {
		/* Margin bottom by footer height */
		margin-bottom: 60px;
	}

	.footer{
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 60px;
		background-color: #C7C7C7;
	}
	
</style>

<style>

html {

position: relative;

min-height: 100%;

}

body {

/* Margin bottom by footer height */

margin-bottom: 60px;

}

.footer{

position: absolute;

bottom: 0;

width: 100%;

height: 60px;

background-color: #C7C7C7;

}

</style>

<div class="container">
		<div class="page-header">
			<h1>Футер снизу <a href="http://getbootstrap.com/examples/sticky-footer-navbar/" alt="Sticky footer">ссылка</a> на пример из бутстрапа</h1>
		</div>	<div class="row firstRow">

		<div class="col-md-12">
			<h2>Так же можно поискать словосочетание navbar-fixed-bottom</h2>
		</div>
				<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias voluptatum ad, voluptas non repudiandae corporis similique quis, nemo quam perferendis at, quo totam. Temporibus placeat facere ducimus magnam odit ullam commodi adipisci, nam, veniam recusandae eius quas sequi sed reiciendis, ab laboriosam in harum eos perferendis. Corporis doloribus dolore, facere.</p></div>
				<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quisquam asperiores sequi quod adipisci libero accusamus facilis quaerat inventore! Mollitia deleniti iste voluptas et ea nesciunt nostrum, aspernatur repudiandae. Consectetur omnis obcaecati sapiente ipsum consequuntur reprehenderit, facere recusandae, ad et libero quasi deserunt ullam dolorum explicabo, nobis praesentium quo eum.</p></div>
			</div>	<div class="row firstRow">
				<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias voluptatum ad, voluptas non repudiandae corporis similique quis, nemo quam perferendis at, quo totam. Temporibus placeat facere ducimus magnam odit ullam commodi adipisci, nam, veniam recusandae eius quas sequi sed reiciendis, ab laboriosam in harum eos perferendis. Corporis doloribus dolore, facere.</p></div>
				<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quisquam asperiores sequi quod adipisci libero accusamus facilis quaerat inventore! Mollitia deleniti iste voluptas et ea nesciunt nostrum, aspernatur repudiandae. Consectetur omnis obcaecati sapiente ipsum consequuntur reprehenderit, facere recusandae, ad et libero quasi deserunt ullam dolorum explicabo, nobis praesentium quo eum.</p></div>
			</div>	<div class="row firstRow">
				<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias voluptatum ad, voluptas non repudiandae corporis similique quis, nemo quam perferendis at, quo totam. Temporibus placeat facere ducimus magnam odit ullam commodi adipisci, nam, veniam recusandae eius quas sequi sed reiciendis, ab laboriosam in harum eos perferendis. Corporis doloribus dolore, facere.</p></div>
				<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quisquam asperiores sequi quod adipisci libero accusamus facilis quaerat inventore! Mollitia deleniti iste voluptas et ea nesciunt nostrum, aspernatur repudiandae. Consectetur omnis obcaecati sapiente ipsum consequuntur reprehenderit, facere recusandae, ad et libero quasi deserunt ullam dolorum explicabo, nobis praesentium quo eum.</p></div>
			</div>	<div class="row firstRow">
				<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias voluptatum ad, voluptas non repudiandae corporis similique quis, nemo quam perferendis at, quo totam. Temporibus placeat facere ducimus magnam odit ullam commodi adipisci, nam, veniam recusandae eius quas sequi sed reiciendis, ab laboriosam in harum eos perferendis. Corporis doloribus dolore, facere.</p></div>
				<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quisquam asperiores sequi quod adipisci libero accusamus facilis quaerat inventore! Mollitia deleniti iste voluptas et ea nesciunt nostrum, aspernatur repudiandae. Consectetur omnis obcaecati sapiente ipsum consequuntur reprehenderit, facere recusandae, ad et libero quasi deserunt ullam dolorum explicabo, nobis praesentium quo eum.</p></div>
			</div>
	</div>

    <footer class="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>

<h1>Футер снизу <a href="http://getbootstrap.com/examples/sticky-footer-navbar/" alt="Sticky footer">ссылка</a> на пример из бутстрапа</h1>

</div> <div class="row firstRow">

<h2>Так же можно поискать словосочетание navbar-fixed-bottom</h2>

</div>

<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias voluptatum ad, voluptas non repudiandae corporis similique quis, nemo quam perferendis at, quo totam. Temporibus placeat facere ducimus magnam odit ullam commodi adipisci, nam, veniam recusandae eius quas sequi sed reiciendis, ab laboriosam in harum eos perferendis. Corporis doloribus dolore, facere.</p></div>

<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quisquam asperiores sequi quod adipisci libero accusamus facilis quaerat inventore! Mollitia deleniti iste voluptas et ea nesciunt nostrum, aspernatur repudiandae. Consectetur omnis obcaecati sapiente ipsum consequuntur reprehenderit, facere recusandae, ad et libero quasi deserunt ullam dolorum explicabo, nobis praesentium quo eum.</p></div>

</div> <div class="row firstRow">

</div>

<p class="text-muted">Place sticky footer content here.</p>

</div>

</footer>

Количество просмотров: 604

| Категория: CSS, HTML, Вёрстка
| Тэги: bootstrap / CSS / HTML / вёрстка

« Фигуры css Простая кнопка вверх вариант-2 »