Div largura de 100% quantidade de menos fixo de pixels
https://stackoverflow.com/questions/651317
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Como posso obter a seguinte estrutura sem utilizar tabelas ou JavaScript? As bordas brancas representam bordas de divs e não são relevantes para a questão.
O tamanho da área no meio vai variar, mas terá valores de pixel exatas e toda a estrutura deve escalar de acordo com esses valores. Para simplificar, eu precisaria de uma maneira de definir "100% - n px". Largura ao topo-middle e bottom-meia divs
Eu apreciaria uma solução cross-browser limpo, mas no caso de que não é possível, hacks CSS vai fazer.
Aqui está um bônus. Outra estrutura que eu estive lutando com e acabam usando tabelas ou JavaScript. É um pouco diferente, mas introduz novos problemas. Eu estive principalmente usá-lo no sistema de janelas baseado em jQuery, mas eu gostaria de manter o layout fora do script e só controlar o tamanho de um elemento (o do meio).
Solução
Você pode usar elementos aninhados e estofo para obter uma vantagem esquerda e à direita na barra de ferramentas. A largura padrão de um elemento div é auto, o que significa que ele usa a largura disponível. Você pode então adicionar preenchimento ao elemento e ainda mantém dentro da largura disponível.
Aqui está um exemplo que você pode usar para colocar imagens como cantos arredondados esquerda e direita, e uma imagem de centro que se repete entre eles.
O HTML:
<div class="Header">
<div>
<div>This is the dynamic center area</div>
</div>
</div>
O CSS:
.Header {
background: url(left.gif) no-repeat;
padding-left: 30px;
}
.Header div {
background: url(right.gif) top right no-repeat;
padding-right: 30px;
}
.Header div div {
background: url(center.gif) repeat-x;
padding: 0;
height: 30px;
}
Outras dicas
New maneira que eu só tropeçou em: css calc() :
.calculated-width {
width: -webkit-calc(100% - 100px);
width: -moz-calc(100% - 100px);
width: calc(100% - 100px);
}
Fonte: css largura 100% menos 100px
Enquanto as obras resposta do Guffa em muitas situações, em alguns casos, você pode não querer as peças certas de preenchimento à esquerda e / ou para ser o pai do div centro. Nestes casos, você pode usar um contexto de formatação bloco no centro e flutuar os divs preenchimento esquerda e direita. Aqui está o código
O HTML:
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
O CSS:
.container {
width: 100px;
height: 20px;
}
.left, .right {
width: 20px;
height: 100%;
float: left;
background: black;
}
.right {
float: right;
}
.center {
overflow: auto;
height: 100%;
background: blue;
}
Eu sinto que esta hierarquia elemento é mais natural quando comparado com divs aninhados aninhadas, e melhor representa o que está na página. Devido a isso, as fronteiras, preenchimento e margem pode ser aplicada normalmente a todos os elementos. (Ie: este 'naturalidade' vai além de estilo e tem ramificações)
Note que isto só funciona em divs e outros elementos que compartilham sua 'preencher 100% da largura por padrão' propriedade. Entradas, tabelas, e, possivelmente, outros vão exigir que você envolvê-los em um recipiente div e adicionar um pouco mais de css para restaurar essa qualidade. Se você é o suficiente azar de estar nessa situação, entre em contato comigo e eu vou cavar o css.
jsFiddle aqui: jsfiddle.net/RgdeQ
Aproveite!
Você pode fazer uso do Flexbox disposição . Você precisa definir flex: 1 no elemento que precisa ter largura dinâmica ou altura para flex-direction: row and column respectivamente.
largura dinâmica:
HTML
<div class="container">
<div class="fixed-width">
1
</div>
<div class="flexible-width">
2
</div>
<div class="fixed-width">
3
</div>
</div>
CSS
.container {
display: flex;
}
.fixed-width {
width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}
Output:
.container {
display: flex;
width: 100%;
color: #fff;
font-family: Roboto;
}
.fixed-width {
background: #9BCB3C;
width: 200px; /* Fixed width */
text-align: center;
}
.flexible-width {
background: #88BEF5;
flex: 1; /* Stretch to occupy remaining width */
text-align: center;
}<div class="container">
<div class="fixed-width">
1
</div>
<div class="flexible-width">
2
</div>
<div class="fixed-width">
3
</div>
</div>
altura dinâmica:
HTML
<div class="container">
<div class="fixed-height">
1
</div>
<div class="flexible-height">
2
</div>
<div class="fixed-height">
3
</div>
</div>
CSS
.container {
display: flex;
}
.fixed-height {
height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}
Output:
.container {
display: flex;
flex-direction: column;
height: 100vh;
color: #fff;
font-family: Roboto;
}
.fixed-height {
background: #9BCB3C;
height: 50px; /* Fixed height or flex-basis: 100px */
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.flexible-height {
background: #88BEF5;
flex: 1; /* Stretch to occupy remaining width */
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}<div class="container">
<div class="fixed-height">
1
</div>
<div class="flexible-height">
2
</div>
<div class="fixed-height">
3
</div>
</div>
A maneira usual de fazer isso é como descrito por Guffa, elementos aninhados. É um pouco triste ter que adicionar marcação extra para obter os ganchos que você precisa para isso, mas na prática, um div envoltório aqui ou ali não vai machucar ninguém.
Se você deve fazê-lo sem elementos extras (ex., Quando você não tem o controle da marcação da página), você pode usar de dimensionamento de caixa, que tem, mas não completo ou simples suporte ao navegador bastante decente. Provavelmente mais divertido do que ter que depender de scripting embora.
Talvez eu esteja sendo idiota, mas não é a tabela de solução óbvia aqui?
<div class="parent">
<div class="fixed">
<div class="stretchToFit">
</div>
.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}
Outra forma que eu descobri em cromo é ainda mais simples, mas o homem é um hack!
.fixed{
float: left
}
.stretchToFit{
display: table-cell;
width: 1%;
}
Isso por si só deve preencher o resto da linha horizontal, como mesa de células fazer. No entanto, você tem alguns problemas estranhos com ele que vai mais de 100% de seu pai, definindo a largura de um por cento de correções de valor embora.
Podemos conseguir isso usando flex-box com muita facilidade.
Se temos três elementos como cabeçalho, MiddleContainer e rodapé. E queremos dar alguma altura fixa para Cabeçalho e rodapé. então podemos escrever como este:
Para Reagir / RN (padrões são 'display' como flex e 'flexDirection' como coluna), em css web nós vamos ter que especificar o recipiente do corpo ou recipiente contendo estes como display: 'Flex', flex-direção: 'coluna' como abaixo:
container-containing-these-elements: {
display: flex,
flex-direction: column
}
header: {
height: 40,
},
middle-container: {
flex: 1, // this will take the rest of the space available.
},
footer: {
height: 100,
}
E se o seu div embrulho foi de 100% e você usou enchimento para uma quantidade de pixels, em seguida, se o preenchimento # precisa ser dinâmico, você pode facilmente usar jQuery para modificar o seu montante estofamento quando seus eventos fogo.
Eu tive um problema semelhante onde eu queria um banner na parte superior da tela que tinha uma imagem à esquerda e uma imagem repetindo à direita para a borda da tela. Acabei resolvê-lo assim:
CSS:
.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}
.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}
A chave foi a tag direita. Basicamente, eu estou especificando que eu quero que ele repita a partir 131px em da esquerda para 0px da direita.
Em alguns contextos, você pode aproveitar as configurações de margem para especificar de forma eficaz "100% largura de menos de N pixels". Veja a resposta aceita a esta questão .
