Como faço para forçar um bloco DIV para estender para a parte inferior de uma página, mesmo que ele não tem conteúdo?
https://stackoverflow.com/questions/147528
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Na marcação mostrado abaixo, eu estou tentando obter a div conteúdo para esticar todo o caminho até a parte inferior da página, mas é só esticar se há conteúdo para mostrar. A razão que eu quero fazer isso é assim na borda vertical ainda aparece abaixo da página, mesmo se não houver qualquer conteúdo para mostrar.
Aqui está a minha HTML :
<body>
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content">
</div>
E a minha CSS :
body {
font-family: Trebuchet MS, Verdana, MS Sans Serif;
font-size:0.9em;
margin:0;
padding:0;
}
div#header {
width: 100%;
height: 100px;
}
#header a {
background-position: 100px 30px;
background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
height: 80px;
display: block;
}
#header, #menuwrapper {
background-repeat: repeat;
background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
height:25px;
}
div#menuwrapper {
width:100%
}
#menu, #content {
width:1024px;
margin: 0 auto;
}
div#menu {
height: 25px;
background-color:#50657a;
}
Solução
Seu problema não é que a div não é a altura de 100%, mas que o recipiente em torno dele é not.This vai ajudar no navegador eu suspeito que você está usando:
html,body { height:100%; }
Você pode precisar de ajustar preenchimento e margens, bem como, mas isso vai te 90% do caminho there.If que você precisa para fazê-lo funcionar com todos os navegadores que você vai ter que mexer um pouco com ele.
Este site tem alguns excelentes exemplos:
http://www.brunildo.org/test/html_body_0.html < br>
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html
Eu também recomendo indo para http://quirksmode.org/
Outras dicas
Vou tentar responder à pergunta diretamente no título, em vez de ser obcecadas em furar um rodapé para a parte inferior da página.
Faça div estender-se ao fundo da página se não há conteúdo suficiente para preencher a janela do navegador vertical disponível:
Demonstração em (arraste a alça de quadro para ver o efeito): http://jsfiddle.net/NN7ky
(. De cabeça: limpo, simples desvantagem: exige flexbox - http://caniuse.com/flexbox )
HTML:
<body>
<div class=div1>
div1<br>
div1<br>
div1<br>
</div>
<div class=div2>
div2<br>
div2<br>
div2<br>
</div>
</body>
CSS:
* { padding: 0; margin: 0; }
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
body > * {
flex-shrink: 0;
}
.div1 { background-color: yellow; }
.div2 {
background-color: orange;
flex-grow: 1;
}
ta-da - ou eu sou muito sonolento
Tente brincar com a seguinte regra CSS:
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}
Alterar a altura para se adequar sua página. altura é mencionado duas vezes para compatibilidade cross browser.
você pode meio que cortá-lo com a declaração min-height
<div style="min-height: 100%">stuff</div>
Tente Ryan Fait de "Sticky rodapé" solução,
http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to -bottom-de-page /
funciona em IE, Firefox, Chrome, Safari e Opera, supostamente, também, mas não testei isso. É uma ótima solução. Muito fácil e confiável para implementar.
A propriedade min-height não é suportado por todos os navegadores. Se você precisa de seu #content para estendê-lo de altura em páginas mais longas a propriedade altura vai cortá-lo curto.
É um pouco de um truque, mas você pode adicionar um div vazio com uma largura de 1px e altura de por exemplo, 1000px dentro de sua div #content. Isso forçará o conteúdo a ser pelo menos 1000px alta e ainda permitir que mais conteúdo para aumentar a altura quando necessário
Embora não seja tão elegante como CSS puro, um pequeno pedaço de javascript pode ajudar a fazer isso:
<html>
<head>
<style type='text/css'>
div {
border: 1px solid #000000;
}
</style>
<script type='text/javascript'>
function expandToWindow(element) {
var margin = 10;
if (element.style.height < window.innerHeight) {
element.style.height = window.innerHeight - (2 * margin)
}
}
</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
Tente:
html, body {
height: 102%;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.div {
position: absolute;
top: 0;
bottom: 0;
width: 1000px;
min-height: 100%;
}
não testei ainda ...
rodapé pegajoso com altura fixa:
esquema de HTML:
<body>
<div id="wrap">
</div>
<div id="footer">
</div>
</body>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#footer {
height: 60px;
}
Eu acho que o problema seria fixado apenas fazendo o preenchimento html 100% também, pode ser o corpo enche a 100% do html, mas html não preenche 100% da tela.
Tente com:
html, body {
height: 100%;
}
Tente http://mystrd.at/modern-clean-css-sticky -footer /
O link acima é para baixo, mas este link https://stackoverflow.com/a/18066619/1944643 é Está bem. : D
Demonstração:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="author" content="http://mystrd.at">
<meta name="robots" content="noindex, nofollow">
<title>James Dean CSS Sticky Footer</title>
<style type="text/css">
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<article>
<!-- or <div class="container">, etc. -->
<h1>James Dean CSS Sticky Footer</h1>
<p>Blah blah blah blah</p>
<p>More blah blah blah</p>
</article>
<footer>
<h1>Footer Content</h1>
</footer>
</body>
</html>
Além disso, você pode gostar isto: http: // matthewjamestaylor .com / blog / ultimate-2-coluna esquerda menu-pixels.htm
Não é bem o que você pediu, mas também pode atender às suas necessidades.
Eu não tenho o código, mas eu sei que eu fiz isso uma vez usando uma combinação de altura: 1000px e margin-bottom: -1000px; Tente fazer isso.
Dependendo de como suas obras de layout, que você pode ir longe com a criação do fundo no elemento <html>, que é sempre pelo menos a altura da janela.
Não é possível fazer isso usando apenas as folhas de estilo (CSS). Alguns navegadores não aceitará
height: 100%;
como um valor maior do que o ponto de vista da janela do navegador.
Javascript é a solução mais fácil cross browser, embora como mencionado, não uma limpa ou bonito.
Você pode usar o "vh" unidade de comprimento para a propriedade min-height do próprio elemento e seus pais. É apoiado desde IE9:
<body class="full-height">
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content" class="full-height">
</div>
</body>
CSS:
.full-height {
min-height: 100vh;
box-sizing: border-box;
}
Não é o melhor nem o melhor implementação dos maiores padrões, mas você pode alterar o DIV para um SPAN ... É uma solução não tão recomendável, mas rápido = P =)
Eu sei que este não é o melhor método, mas eu não conseguia descobrir isso sem mexer meu cabeçalho, menu, etc posições. Então .... Eu usei uma mesa para essas duas colunas. Era uma solução rápida. Sem JS necessário;)
