CSS: min-height não funciona

StackOverflow https://stackoverflow.com/questions/958888

  •  12-09-2019
  •  | 
  •  

Pergunta

Sempre que eu adicionar a propriedade min0height aos DIVs para torná-los 100%, ele não funciona. Eu adicionei-los para todos os DIVs, incluindo height: 100%; e min-altura: 100%; mas nada funciona. O que eu faria para torná-lo estender por todo o caminho? É apenas corta o fundo da barra lateral e a cor da área de conteúdo de fundo.

text alt

(Esqueceu-se de rotular uma parte. A área de conteúdo com o fundo branco é .col1)

CSS: 

@charset "UTF-8";
/* CSS Document */

img {
    border-style: none;
    color: #FFF;
    text-align: center;
}
body {
    background-color:#000;
    margin:0;
    padding:0;
    border:0;           /* This removes the border around the viewport in old versions of IE */
    width:100%;
}
.sidebar {
    background-image:url(../images/sidebar/background.png);
    background-repeat:repeat-y;
    font: 12px Helvetica, Arial, Sans-Serif;
    color: #666;
    z-index:1;
}
.menu {
    background-image:url(../images/top_menu/background.png);
    background-repeat:repeat-x;
    height:25px;
    clear:both;
    float:left;
    width:100%;
    position:fixed;
    top:0px;
    z-index:5;
    background-color:#000;
}
.bottom_menu {
    background-image:url(../images/bottom_menu/background.png);
    background-repeat:repeat-x;
    height:20px;
    z-index:2;
    font: 12px Helvetica, Arial, Sans-Serif;
    clear:both;
    float:left;
    width:100%;
    position:fixed;
    bottom:0px;
}
.colmask {
    position:relative;      /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
    clear:both;
    float:left;
    width:100%; /* width of whole page */
    overflow:hidden;    /* This chops off any overhanging divs */
}
.sidebar .colright {
    float:left;
    width:200%;
    position:relative;
    left:225px;
    background:#fff;
}
.sidebar .col1wrap {
    float:right;
    width:50%;
    position:relative;
    right:225px;
}
.sidebar .col1 {
    margin:30px 15px 0 225px; /* TOP / UNKNOWN / UNKNOWN / RIGHT */
    position:relative;
    right:100%;
    overflow:hidden;
}
.sidebar .col2 {
    float:left;
    width:225px;
    position:fixed;
    top:0px;
    left:0px;
    margin-top:25px;
    margin-left:5px;
    right:225px;
}
.clear {
    clear: both;
    height: 1px;
    overflow: hidden;
}

HTML 

<body>
<div id="container">
<div class="menu">Header Content</div>
<div class="colmask sidebar">
    <div class="colright">
      <div class="col1wrap">
            <div class="col1" id="contentDIV">
                Content
            </div>
        </div>
        <div class="col2">
            Sidebar Content
        </div>
    </div>
</div>
<div class="bottom_menu">Footer Content</div>
</div>
</body>
Foi útil?

Solução

Fixed. Era o direito div recipiente após a tag body. Mesmo com a altura CSS, criou problemas. Tirei-o e mudou um script que eu tinha de prestar nesse div ao document.body e tudo funciona agora.

Outras dicas

Se você está tentando fazer o seu conteúdo e barra lateral esticar toda a altura da página, em seguida, nenhuma quantidade de definir uma altura que realmente está acontecendo para ajudar. Se você usar 100%, o seu curso para empurrar o seu Fotter fora da parte inferior da página de modo que você tem que se deslocar para vê-lo. Não há um único método que eu conheço que vai permitir que você tenha um corpo de altura completa com um rodapé: Sticky rodapé

Verifique o seguinte site para obter detalhes: http://www.cssstickyfooter.com/

Outro truque que você provavelmente precisará. É quase impossível de obter duas colunas de ter a mesma altura e apoiar todos os navegadores. A maneira mais simples para obter a sua coluna de cinza para o corpo central esquerdo e branco para esticar todo o caminho para o rodapé é usar uma imagem de altura de 1 pixel que tem cinzenta e branca nas proporções adequadas, que é ao longo do y repetiu-fundo eixo.

Outro ótimo site para conhecimento CSS é A List Apart .

É difícil conseguir um layout consistente usando carros alegóricos e posicionamento nos mesmos elementos. Em particular flutuador e posição:. Fixa (ou absoluto) são incompatíveis e cada alças navegador a situação de forma diferente

IE6 não suporta posição: fixo em tudo e trata como posição:. Estática (o padrão - nenhum posicionamento em tudo)

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top