Problema com posicionamento de elemento >Bootstrap<

[Eduardo_555 4]

olá estou desenvolvendo um site, e criando o layout do mesmo com o bootstrap,

 

ate ai tudo bem, coloque um menu superior fixo, um container principal com o conteudo funcionando tudo de boa.

 

porem Coloquei um container fluid no fim da pagina, para servir como rodape, com endereço essas coisas,

 

o problema e que quando coloco em monitores com resoluçao maiores que o meu, ele simplesmente nao fica no fundo, ele sobe e fica colado ao fim do container principal, e abaixo dele sobre um grande espaço em branco.

 

-OQUE JA FIS PARA TENTAR RESOLVER.

.container-fluid{
      position:relative;
      bottom:0;
} 

ja usei isso de diversas formas ate dei um ID para a div mas nao resolveu, e agora???

 

vou colocar um pedaço do codigo para voces.

.col-md-8 img{
	left:40%;
	position:relative;
	height:20.13333333333333%;/*160px;*/
	width:12.516837481698389%;/*130px;*/
	margin:10px;
}
.navbar-inverse{
	border-radius:0px;
	margin:0%;
}
.navbar-nav{
	text-align:center;
	color:#ffffff;
}
h5{
	color:#e40e0e;
	font-size:15px;
	text-align:center;
}
h6{
	font-size:14px;
	text-align:center;
}
h2{
	font-size:16px;
	text-align:center;
	line-height:30px;
}
h3{
	text-align:center;
	font-size:15px;
}
h4{
	text-align:center;
	font-size:22px;
}
h1{
	font-size:10px;
	line-height:10px;
}
p{
	line-height:30px;
}
body{
	background:#fdfdfd;/*#f7f7f7;*/
}
.rodape{
	background:#000000;
	color:#ffffff;
}
body{
	font-family: 'Oxygen', sans-serif;
}
.container{
	background:#fdfdfd;/*#f7f7f7;*/
}
.jumbotron img{
	height:100px;
	width:350px;
	margin:15px;
}
.jumbotron h1{
	position:relative;
	font-size:40px;
	float:right;
	text-align:center;
	margin-top:50px;
}
.jumbotron{
	margin:0%;
	padding:0%;
}
.col-md-4 img{
	height:60px;
	width:60px;
	float:top;
	position:relative;
	left:42%;
	background:#f7f7f7;
	padding:10px;
	border:solid;
	border-radius:15px;
	border-background:#000000;
}
.conteudo{
	background:#000000;
	color:#ffffff;
	position:absolute;
	width:100%;
	height:auto;
	text-align:left;
	padding:15px;
}
.conteudo img{
	height:180px;
	width:350px;
}
.col-md-5 img{
	height:150px;
	width:120px;
	float:left;
	margin:10px;
}
#teste{
	background:#b6b4b4;
	color:#ffffff;
	position:absolute;
	bottom:0;
}
.navbar-default {
  background-color: #b6b4b4;
  border-color: #e1e1e1;
}
.navbar-default .navbar-brand {
  color: #ffffff;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  color: #040404;
}
.navbar-default .navbar-text {
  color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
  color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: #040404;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #040404;
  background-color: #e1e1e1;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  color: #040404;
  background-color: #e1e1e1;
}
.navbar-default .navbar-toggle {
  border-color: #e1e1e1;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #e1e1e1;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ffffff;
}
.navbar-default .navbar-link {
  color: #ffffff;
}
.navbar-default .navbar-link:hover {
  color: #040404;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #040404;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #040404;
    background-color: #e1e1e1;
  }
}

	<div class="container-fluid" id="teste">
			<br>
			<div class="row">
				<div class="col-md-5">
				<img src="midia/logo007.png">
				<br>
				<br>
				<address>
					Rua Santo angelo<br>
					xxxxxxxxxxx, xx n°111
					Sala n°000<br>
					<abbr title = "Fone">Fone:</abbr> (11)9999-6666
				</address>

				<address>
					<strong>Email</strong><br>
					<a href = "mailto:#">11111111</a>
				</address>
			</div>	
			</div>
			<br>
			</div>		

Do HTML so coloquei a prte questa dando problema, mas acima do codigo so tem um container principal com seu conteudo, e uma barra de navegaçao fixa no topo.

 

espero que ajudem::::

[gedmilson 5]

Você já tentou colocar fazer isso no rodapé?

 

<div style="clear: both;"></div>

 

 

Isso só servirá se você tiver dividido ao cabeçalho, rodapé e conteúdo principal.

em três paginas diferentes.

[Eduardo_555 4]

Eu coloquei porem nao resolveu, entao pensei comigo e modifiquei no css

 

acrescebntei isso

 

#teste{
	background:#b6b4b4;
	color:#ffffff;
	position:absolute;
	bottom:0;
	width:100%;
}

assim ele fica fixo no fim do pagina, porem com resoluçoes pequenas com a do meu pc 1366x768 ele fica em cima do conteudo do container principal,

 

corrigi um problema arrangei outro kkk

 

e ai??

[gedmilson 5]

Você colocou uma position absolute agora precisa de outra com a position relative para que a absolute funcione.

[Eduardo_555 4]

ola

 

na verdade eu coiloquei o container principal como relative e a parte do container fluid onde fica o meu rodape como absolute

 

nao deveria funcionar assim??

 

aqui ele fica no fim da pagina porem sobrescreve o conteudo do container principal.