fc_logo_w_label
FructCode
Курсы и скринкастыКомьюнитиБлогЦена и оплата
Темно
ru
ВойтиРегистрация

footer

0

вопрос ! урок28 bootstrap . пишу wrapper : min-height:100%;

                                                  footer :height:100%;

и футер все равно не прилипает к низу

html
css

2 ответов

1

Весь ваш код покажите

1

<!DOCTYPE html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 mee first in the head; any other head content must come *after* these tags -->
<title>киномонстр bootsnrap</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
<div class="container-fluid">
<div class="row">
<nav role="navigation" class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1><a href="#">КиноМонстр</a></h1>
<p>Кино - наша страсть!</p>
</div>
</div>
</div>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

</button>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse navbar-right">
<ul class="nav nav-pills">
<li class="active"><a href="#">главная</a></li>
<li><a href="#">фильмы</a></li>
<li><a href="#">сериалы</a></li>
<li><a href="#">рэйтинг фильмов</a></li>
<li><a href="#">контакты</a></li>

</ul>
</div>
</div>

</nav>
</div>
</div>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-9 col-sm-push-3">
<form role="search"class="visible-xs">
<div class="form-group">
<div class="input-group">
<input type="search" class="form-control input-lg" placeholder="Ваш запрос">
<div class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>

</div>


</div>

</form>

<h2>новые фильмы</h2>
<hr>
<div class="row">

<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src="img/inter.png" alt="интерстеллар">
<div class="film_label">Интерстеллар</div>
</div>

<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src="img/matrix.png" alt="матрица">
<div class="film_label">Матрица</div>
</div>

<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src="img/cloud.png" alt="облачный атлас">
<div class="film_label">Облачный атлас</div>
</div>

<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src="img/max.png" alt="безумный макс">
<div class="film_label">Безумный макс</div>
</div>

</div>

<div class="margin-8"></div>

<!--
Ниже создайте по аналогии с первым блоком второй блок с фильмами.

Порядок фильмов:
1. Секретные материалы, Название файла картинки: xfiles.png
2. Кремневая долина, Название файла картинки: silicon.png
3. Ходячие мертвецы, Название файла картинки: dead.png
4. Во все тяжкие, Название файла картинки: breakingbad.png
-->

<h2>Новые сериалы</h2>
<hr>
<div class="row">

<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src="img/xfiles.png" alt="Секретные материалы">
<div class="film_label">Секретные материалы</div>
</div>

<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src="img/silicon.png" alt="Кремневая долина">
<div class="film_label">Кремневая долина</div>
</div>

<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src="img/dead.png" alt="Ходячие мертвецы">
<div class="film_label">Ходячие мертвецы</div>
</div>

<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src="img/breakingbad.png" alt="Во все тяжкие">
<div class="film_label">Во все тяжкие</div>
</div>

</div>

<div class="margin-8"></div>

<a href="#">
<h3>как снимали интерстеллар</h3>
</a>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque consectetur doloremque earum, eligendi qui amet natus, eaque magnam delectus. Placeat inventore adipisci distinctio illo, neque omnis voluptatem ducimus fugiat culpa.</p>
<a href="#" class="btn btn-warning pull-right">читать</a>
<div class="margin-8"></div>
<a href="#">
<h3>как снимали матрицу</h3>
</a>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque consectetur doloremque earum, eligendi qui amet natus, eaque magnam delectus. Placeat inventore adipisci distinctio illo, neque omnis voluptatem ducimus fugiat culpa.</p>
<a href="#" class="btn btn-warning pull-right">читать</a>

<div class="margin-8 clear"></div>


</div>
<div class="col-sm-3 col-lg-pull-9">
<div class="panel panel-info">
<div class="panel-heading">
<div class="sidebar-header">поиск</div>
</div>
<div class="panel-body">
<form role="search" class="hidden-xs">
<div class="form-group">
<div class="input-group">
<span></span>

<input type="search" class="form-control input-lg" placeholder="Ваш запрос">
<div class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>

</div>


</div>

</form>
</div>

</div>
<div class="panel panel-info">
<div class="panel-heading">
<div class="sidebar-header">вход</div>
</div>
<div class="panel-body">


<form role="form">

<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="логин">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="пароль">

</div>
<button type="submit" class="btn btn-warning pull-right">вход</button>
</form>


</div>
</div>

<div class="panel panel-info">
<div class="panel-heading"><div class="sidebar-header">Новости</div></div>
<div class="panel-body">

<p>31.02.2017</p>
<p>Мы запустили новый сервис</p>

</div>
</div>
<div class="panel panel-info">
<div class="panel-heading"><div class="sidebar-header">Рейтинг фильмов</div></div>
<div class="panel-body">

<ul class="list-group">
<li class="list-group-item list-group-warning">
<span class="badge">8.9</span>
<a href="#">Интерстеллар</a>
</li>

<li class="list-group-item list-group-warning">
<span class="badge">8.7</span>
<a href="#">Безумный макс</a>
</li>

<li class="list-group-item list-group-warning">
<span class="badge">8.3</span>
<a href="#">Матрица</a>
</li>

<li class="list-group-item list-group-warning">
<span class="badge">8.1</span>
<a href="#">Облачный атлас</a>
</li>

<li class="list-group-item list-group-warning">
<span class="badge">8.9</span>
<a href="#">Интерстеллар</a>
</li>

<li class="list-group-item list-group-warning">
<span class="badge">8.7</span>
<a href="#">Безумный макс</a>
</li>

<li class="list-group-item list-group-warning">
<span class="badge">8.3</span>
<a href="#">Матрица</a>
</li>

<li class="list-group-item list-group-warning">
<span class="badge">8.1</span>
<a href="#">Облачный атлас</a>
</li>
</ul>

</div>
</div>

</div>
</div>
</div>
<div class="clear">


</div>
</div>
<footer>
<div class="container">
<p class="text-center"> <a href="https://fructcode.com">FRUCTCODE.COM</a> </p>
</div>
</footer>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</div>
</body>

</html>

css

.header a,
a:hover {
color: #FFDD00;
text-decoration: none;
}

.header h1 {
letter-spacing: 15px;
font-size: 300%;
color: #ffbe00;
}

.header p {
color: white !important;
font-size: 90%;
letter-spacing: 3px;

}

.nav-pills > li.active > ,
.,
nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
color: #3AE2CE;
background-color: #3AE2CE;

}

.nav-pills > li > a {
color: #fff;


}

.nav-pills > li > a:hover {
background-color: #306FCD;


}

.navbar-inverse {

padding: 1%;
}

@media(max-width: 767px) {
.nav-pills > li {
float: none;

}

.nav-pills {

text-align: center;
}
.header h1 {
letter-spacing: 5px;
font-size: 40px;
}
.header {
text-align: center;

}


}

.clear {
clear: both;
width: 63px;

}

.wrapper {
min-height: 100%;

}

html,
body {
height: 100%;
}

.panel {
border: none;

}

.panel-body {
background-color: #f9f9f9;

}

.panel-info > .panel-heading {
background-color: #f0ad4e;
color: white;
border-color: transparent;
}

.sidebar-header {
font-size: 120%;
letter-spacing: 2px;

}

footer {
color: #666;
background-color: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
height: 80px;

}

footer a {
color: #999;

}

footer a:hover {
color:
}

.films_block img {
margin-bottom: 5%;
border-radius: 5px;
border: solid 5px #dad7d5;
width: 100%;


}

.films_block {
text-align: center;

}
textarea.form-control{
height: 200px;
}

.films_label {}

.margin-8 {
margin-top: 8%;
}

.form-control {

font-size: 14px;

}

.input-lg {
font-size: 14px;

}

.form-control {
border-radius: 2px;

}
.info-block{
font-size: 120%

}
.info-block.badge{
font-size: 80%;

}
.info-block span{
margin-right: 3%;
}
.table tbody>tr>td.vert-align{
vertical-align: middle;
}

Sign up or Log in to write an answer