Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

diegoalves

Problema com margin e height 100%

Por , em Desenvolvimento frontend

Recommended Posts

diegoalves    0

diegoalves
Postado

Boa noite pessoa. Sou novo por aqui, então qualquer asneira que eu falar por favor sintam-se à-vontade para reclamar.

 

 

Bom, estou com um grave problema (acho que fácil de resolver). Tenho o seguinte HTML (5, minimizado)

 

 

<body>
    <div class="bg_menu">
        <header class="menu_content">
            
        </header>
    </div>

    <div class="bg_content">
        <div class="content">
            
        </div>
    </div>
</body>

 

 

É um código muito simples, contendo duas divs, cada uma com uma div dentro.

 

o css que estou aplicando é o css do meyers:

 

 

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

 

 

E o código do css meu é o seguinte:

 

 

 

html, body {
    width: 100%;
    height: 100%;
    font-family: "Arial", sans-serif; color: #444;
    background: #EEEBEB;
}

/*Qualified elements in layout*/
.menu_content, .content {
    position: relative;
}

.bg_menu {
    height: 54px;
    background: #960E00 url('../img/bg_header.png') repeat-x;
}.menu_content {
    margin: 0 auto;
    width: 1000px;
}

.bg_content {
    width: 100%;
    height: 100%;
    background: #EEEBEB url('../img/dotted.jpg') repeat-x;
    box-shadow: inset  4px 6px 30px #969696;
}

.content {
    width: 1000px;
    height: 700px;
    margin: 20px auto;
    border-radius: 4px;
    background-color: #FFF;
    box-shadow: 2px 2px 5px #A5A8AB;
}

É um CSS bastante simples, mas se observarem ele tem dois problemas:

 

1º eu dei um margin de 20px na div que está dentro da div bg_content, e para minha surpresa, ela me deu um margin relativo a barra do menu em cima.

 

2º O height 100%, fez com que minha div ficasse com 100% do tamanho do body (isso eu já saquei), ou seja, fazendo aparecer a barra de rolagem um pouco.

 

Gostaria de uma luz de o porque está dando esse problema e uma luz de como fazer com que a div não faça aparecer a barra de rolagem (apenas quando o conteudo da div content crescer claro).

 

Agradeço desde já a ajuda e a paciência de todos, muito obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

#eclipse    1

#eclipse
Postado

Para de desenvolver layout fluído, é muito relativo o uso de porcentagem para definir qualquer propriedade da página. Para usar essas propriedades você deve leva em consideração que ela segue um padrão:

Os elementos estão em "árvore", ou seja, se a div estiver independente ela vai se basear nas medidas da corpo principal da página o "body".

 

Então eu recomendaria, você acessar o site do maujor e dar uma estudada em layout fluído(ou líquido) para essas usar propriedades de maneira eficiênte!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

tenta assim:

.content {
    width: 1000px;
    height: 700px;
    margin: 0 auto;
    padding: 20px 0;/* transferi para cá o espaçamento top */
    border-radius: 4px;
    background-color: #FFF;
    box-shadow: 2px 2px 5px #A5A8AB;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

diegoalves    0

diegoalves
Postado

Olá #eclipse, irei dar uma olhada nisso sim.

 

William, o problema ai, é que o padding é o espaçamento interno da div, eu quero fazer com que essa div branca fique "descolada" do menu de cima, ms a div que é pai dela deve permanecer colada (imediatamente abaixo) da barra do menu, entendeu?

 

Colocando padding, ela cola no menu.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

é que quando vc faz margin-top, ocorre um margin collapse e ela transfere de elemento.

 

uma forma de corrigir isso é adicionando um overflow na sua externa:

.bg_content {
    overflow: hidden;
}

Assim a margin não vai "subir" de elemento.

Compartilhar este post

Link para o post
Compartilhar em outros sites

diegoalves    0

diegoalves
Postado

William, muitissimo obrigado cara. Agora sim resolveu meu problema. Ficou bacana mesmo agora. Eu sabia que era algo que eu precisava saber de particularidade, por isso é bom a prática. Eu fiz cursos de HTML e CSS, mas algumas coisas você só se liga e aprende na prática, não tem pra onde correr.

 

Com relação ao height 100%, tens alguma dica para que eu resolva o problema? Eu já sei que isso ocorre porque ele pega a área da tela e coloca como altura da div, e obviamente passa.

 

Se tiver alguma forma melhor de fazer, que evite a criação da barra de rolagem sem necessidade ficaria interessante.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito