Buscando CSS informações de compatibilidade do navegador para a configuração de largura com esquerda e direita

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

Pergunta

Aqui está uma pergunta que está me assombrando há um ano. A questão da raiz é como faço para definir o tamanho de um elemento relativo a seu pai para que ele seja inserida por N pixels de cada borda? Definir a largura seria bom, mas você não sabe a largura do pai, e você quer os elementos para redimensionar com a janela. (Você não quer usar porcentagens porque você precisa de um número específico de pixels).

Editar Também preciso impedir que o conteúdo (ou falta de teor) de esticar ou encolher ambos os elementos. Primeira resposta que recebi foi usar preenchimento no pai, que seria um grande trabalho. Eu quero que o pai para ser exatamente 25% de largura, e exatamente a mesma altura que a área cliente do navegador, sem a criança ser capaz de empurrá-lo e obter uma barra de rolagem. / Editar

Eu tentei resolver este problema utilizando {top: NPX; esquerda: NPX; bottom: NPX; direita: NPX;} mas só funciona em determinados navegadores

.

Eu poderia escrever algumas javascript com jQuery para corrigir todos os elementos com cada redimensionamento página, mas eu não estou muito feliz com essa solução. (E se eu quiser o deslocamento por 10px topo, mas o fundo, apenas 5px? Fica complicado.)

O que eu gostaria de saber é ou como resolver isso de uma maneira cross-browser, ou alguma lista de navegadores que permitem a solução CSS fácil. Talvez alguém lá fora, tem um truque que torna isso fácil.

Foi útil?

Solução

O O CSS Box modelo pode fornecer uma visão para você, mas meu palpite é que você não está indo para alcançar layout de pixel-perfect apenas com CSS.

Se bem entendi, você quer o pai para ser de 25% de largura e exatamente a altura da área de exibição do navegador. Então você quer que o filho seja de 25% - pixels 2n de largura e 100% pixels -2N de altura com n pixels que cercam a criança. Nenhuma especificação CSS atual inclui suporte a esses tipos de cálculos (embora IE5, IE6 e IE7 tem não-padrão suporte para expressões CSS e IE8 está caindo apoio para expressões CSS no modo IE8 em padrões).

Você pode forçar o pai a 100% da área do navegador e 25% de largura, mas você não pode esticar a altura da criança para a perfeição do pixel com este ... 

<style type="text/css">
html { height: 100%; }
body { font: normal 11px verdana; height: 100%; }
#one { background-color:gray; float:left; height:100%; padding:5px; width:25%; }
#two { height: 100%; background-color:pink;}
</style>
</head>
<body>
<div id="one">
<div id="two">
<p>content ... content ... content</p>
</div>
</div>

... mas uma barra de rolagem horizontal aparecerá. Além disso, se o conteúdo é espremido, o fundo pai não vai se estender além de 100%. Este é talvez o exemplo de preenchimento que você apresentou na própria questão.

Você pode conseguir o ilusão que você está procurando através de imagens e divs adicional, mas CSS sozinho, eu não acredito, pode alcançar a perfeição do pixel com a exigência de altura no local.

Outras dicas

Se você está preocupado apenas com espaçamento horizontal, então você pode fazer todos os elementos de bloco criança dentro de um elemento de bloco pai "inset" por uma certa quantidade, dando o elemento pai estofamento. Você pode fazer um elemento de bloco único filho dentro de um elemento de bloco pai "inserção", dando as margens do elemento. Se você usar o último acesso, pode ser necessário definir uma fronteira ou ligeira preenchimento no elemento pai para impedir margem de colapso.

Se você está preocupado com o espaçamento vertical, bem, então você precisa usar posicionamento. As necessidades elemento pai para ser posicionada; se você não quer movê-lo em qualquer lugar, em seguida, usar position: relative e não se preocupam definição top ou left; ele permanecerá onde está. Então você usa posicionamento absoluto no elemento filho, e um conjunto top, right, bottom e left em relação às bordas do elemento pai.

Por exemplo: 

#outer {
    width: 10em;
    height: 10em;
    background: red;
    position: relative;
}

#inner {
    background: white;
    position: absolute;
    top: 1em;
    left: 1em;
    right: 1em;
    bottom: 1em;
}

Se você quiser evitar conteúdo de expandir a largura de um elemento, então você deve usar a propriedade overflow, por exemplo, overflow: auto.

Basta aplicar um pouco de preenchimento para o elemento pai, e nenhuma largura no elemento filho. Supondo que ambos são display:block, que deve funcionar bem.

Ou ir o contrário:. Definir o margin do-elemento filho

Floatutorial é um grande recurso para coisas como esta.

Tente isto: 

.parent {padding:Npx; display:block;}
.child {width:100%; display:block;}

Ela deve ter um espaço NPX em todos os lados, estendendo-se para preencher o elemento pai.

EDIT: Claro que, no pai, você também pode usar 

{padding-top:Mpx; padding-bottom:Npx; padding-right:Xpx; padding-left:Ypx;}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top