Como fazer uma div preencher um espaço horizontal restante?
https://stackoverflow.com/questions/1032914
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu tenho 2 divs: um no lado esquerdo e outro no lado direito da minha página. O do lado esquerdo tem largura fixa e quero que a do lado direito para preencher o espaço restante.
#search {
width: 160px;
height: 25px;
float: left;
background-color: #ffffff;
}
#navigation {
width: 780px;
float: left;
background-color: #A53030;
}<div id="search">Text</div>
<div id="navigation">Navigation</div>
Solução
Este parece realizar o que você está indo para.
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
width: 100%;
background-color:#00FF00;
}<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
Outras dicas
O problema que eu encontrei com a resposta de Boushley é que, se a coluna da direita é maior que o deixou apenas vai envolver em torno da esquerda e continuar preenchendo todo o espaço. Este não é o comportamento que eu estava procurando. Depois de pesquisar através de lotes de 'soluções' Eu encontrei este incrível tutorial na criação de três colunas Páginas.
três maneiras diferentes da oferta autor, uma largura fixa, um com três colunas de variáveis ??e um com colunas exteriores fixa e uma variável de largura média. Muito mais elegante e eficaz do que outros exemplos que eu encontrei. Melhorou significativamente a minha compreensão do layout CSS.
Basicamente, no caso mais simples acima, flutuar a primeira coluna da esquerda e dar-lhe uma largura fixa. Em seguida, dar a coluna à direita uma margem esquerda que é um pouco maior do que a primeira coluna. É isso aí. Feito. código de Ala Boushley:
Aqui está uma demonstração em Pilha Snippets & jsFiddle
#left {
float: left;
width: 180px;
}
#right {
margin-left: 180px;
}
/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}<div id="left"> left </div>
<div id="right"> right </div>
Com o exemplo de Boushley coluna da esquerda detém a outra coluna à direita. Assim que a coluna da esquerda termina o direito começa a encher todo o espaço novamente. Aqui, a coluna da direita simplesmente alinha mais na página e coluna da esquerda ocupa é grande margem de gordura. Não há interações fluxo necessário.
A solução vem da propriedade de exibição.
Basicamente, você precisa fazer as duas divs agir como células da tabela. Então, em vez de usar float:left, você terá que usar display:table-cell em ambos os divs, e pela dinâmica largura Div você precisa definir width:auto; também. Os dois divs devem ser colocadas num recipiente largura de 100% com a propriedade display:table.
Aqui está o css:
.container {display:table;width:100%}
#search {
width: 160px;
height: 25px;
display:table-cell;
background-color: #FFF;
}
#navigation {
width: auto;
display:table-cell;
/*background-color: url('../images/transparent.png') ;*/
background-color: #A53030;
}
*html #navigation {float:left;}
E o HTML:
<div class="container">
<div id="search"></div>
<div id="navigation"></div>
</div>
IMPORTANTE: Para o Internet Explorer é necessário especificar a propriedade float na div largura dinâmica, caso contrário, o espaço não será preenchido
.Espero que isso vai resolver o seu problema. Se você quiser, você pode ler o artigo completo eu escrevi sobre isso em meu blog .
Uma vez que esta é uma questão bastante popular, eu estou inclinado a compartilhar uma boa solução usando BFC.
amostra Codepen da seguinte aqui .
.left {
float: left;
width: 100px;
}
.right {
overflow: auto;
}
Neste caso, gatilhos overflow: auto comportamento contexto e faz com que o elemento certo expandir única para a largura restante disponível e ele irá, naturalmente expandir a largura total se desaparece .left. Um truque muito útil e limpo para muitos layouts de interface do usuário, mas talvez difícil de entender o "porquê ele funciona" em primeiro lugar.
Estes dias, você deve usar o método flexbox (pode ser adaptado para todos os navegadores com um prefixo browser).
.container {
display: flex;
}
.left {
width: 180px;
}
.right {
flex-grow: 1;
}
Mais informações: https://css-tricks.com/ snippets / css / a-guide-to-flexbox /
Se você não precisa de compatibilidade com versões mais antigas de certos navegadores (IE 10 8 ou menos, por exemplo) você pode usar a função calc() CSS:
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
float: left;
width: calc(100% - 180px);
background-color:#00FF00;
}
@ resposta de Boushley era o mais próximo, no entanto, há um problema não abordado isso pontas tem sido. O direito div leva toda a largura do navegador; o conteúdo leva a largura esperado. Para ver este problema melhor:
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
body {
height: 100%;
}
#left {
opacity: 0;
height: inherit;
float: left;
width: 180px;
background: green;
}
#right {
height: inherit;
background: orange;
}
table {
width: 100%;
background: red;
}
</style>
</head>
<body>
<div id="left">
<p>Left</p>
</div>
<div id="right">
<table><tr><td>Hello, World!</td></tr></table>
</div>
</body>
</html>
O conteúdo está no lugar correto (no Firefox), no entanto, a largura incorreta. Quando elementos filhos começam a herdar largura (por exemplo, a tabela com width: 100%) eles recebem uma largura igual à do navegador fazendo-os transbordar para fora da direita da página e criar uma barra de rolagem horizontal (no Firefox) ou não flutuar e ser empurrado para baixo (em cromo).
Você pode corrigir esse facilmente adicionando overflow: hidden na coluna da direita. Isto dá-lhe a largura correta para tanto o conteúdo como a div. Além disso, a mesa receberá a largura correta e preencha os restantes largura disponível.
Eu tentei algumas das outras soluções acima, eles não funcionam plenamente com certos casos de ponta e foram simplesmente demasiado complicado para mandado de corrigi-los. Isso funciona e é simples.
Se houver quaisquer problemas ou preocupações, sinta-se livre para criá-los.
Aqui está uma pequena correção para solução aceita, o que impede coluna da direita de cair na coluna esquerda. Substituído width: 100%; com overflow: hidden; uma solução complicada, se alguém não sabia disso.
<html>
<head>
<title>This is My Page's Title</title>
<style type="text/css">
#left {
float: left;
width: 180px;
background-color: #ff0000;
}
#right {
overflow: hidden;
background-color: #00FF00;
}
</style>
</head>
<body>
<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
http://jsfiddle.net/MHeqG/2600/
[editar] Verifique também um exemplo para três layout da coluna: http://jsfiddle.net/MHeqG/3148/
Use display:flex
<div style="width:500px; display:flex">
<div style="width:150px; height:30px; background:red">fixed width</div>
<div style="width:100%; height:30px; background:green">remaining</div>
</div>
A resposta de Boushley parece ser o melhor caminho a percorrer a fim de organizar isso usando carros alegóricos. No entanto, não é sem seus problemas. Aninhados flutuante dentro do elemento expandido não estará disponível para você; ele vai quebrar a página.
O método mostrado basicamente "finge" quando se trata do elemento de expansão -. Não é realmente flutuando, é só tocar junto com a largura fixa elementos flutuou usando suas margens
O problema, então, é exatamente isso: o elemento de expansão não é lançada. Se você tentar e ter qualquer flutuante aninhados dentro do elemento de expansão, os "nested" flutuou itens não são realmente aninhados em tudo; quando você tenta enfiar uma clear: both; sob o seu "nested" itens flutuava, você vai acabar limpando as bóias de nível superior também.
Em seguida, usar solução de Boushley, eu gostaria de acrescentar que você deve colocar um div como a seguinte: .fakeFloat { altura: 100%; largura: 100%; float: left; } e colocá-lo diretamente dentro do div expandido; todo o conteúdo do div expandida deve ir em seguida, dentro desse elemento fakeFloat.
Por esta razão, eu recomendo o uso de tabelas, neste caso específico. elementos flutuavam realmente não são projetados para fazer a expansão que você gostaria, enquanto que a solução usando uma tabela é trivial. Um argumento é geralmente feito que flutuante é mais adequado para layouts, não tabelas .. mas você não estiver usando flutuante aqui de qualquer maneira, você está fingindo - e esse tipo de derrota a finalidade do argumento estilística para este caso específico, em minha humilde opinião.
Eu tentei as soluções acima para uma esquerda líquido, e um fixo direito, mas não deles trabalhou (Estou ciente da questão é que o inverso, mas eu acho que isso é relevante). Aqui está o que fez trabalho:
.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}
.right {float:right; width:150px;}
<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>
Eu tive um problema semelhante e eu encontrei a solução aqui: https://stackoverflow.com/a/16909141/3934886
A solução é para um div central fixa e colunas laterais líquidos.
.center{
background:#ddd;
width: 500px;
float:left;
}
.left{
background:#999;
width: calc(50% - 250px);
float:left;
}
.right{
background:#999;
width: calc(50% - 250px);
float:right;
}
Se você quer uma coluna esquerda fixo, basta alterar a fórmula em conformidade.
Se você está tentando preencher o espaço restante em um flexbox entre 2 itens, adicionar a seguinte classe a um um div vazio entre a 2, você quer separado:
.fill {
// This fills the remaining space, by using flexbox.
flex: 1 1 auto;
}
Você pode usar as propriedades CSS Grade, é a estrutura maneira mais clara, limpa e intuitiva suas caixas.
#container{
display: grid;
grid-template-columns: 100px auto;
color:white;
}
#fixed{
background: red;
grid-column: 1;
}
#remaining{
background: green;
grid-column: 2;
}<div id="container">
<div id="fixed">Fixed</div>
<div id="remaining">Remaining</div>
</div>
Eu imagino que ninguém position: absolute usado com position: relative
Assim, outra solução seria:
HTML
<header>
<div id="left"><input type="text"></div>
<div id="right">Menu1 Menu2 Menu3</div>
</header>
CSS
header { position: relative; }
#left {
width: 160px;
height: 25px;
}
#right {
position: absolute;
top: 0px;
left: 160px;
right: 0px;
height: 25px;
}
/ * * css * /
#search {
position: absolute;
width: 100px;
}
.right-wrapper {
display: table;
width: 100%;
padding-left:100px;
}
.right-wrapper #navigation {
display: table-cell;
background-color: #A53030;
}
/ * * html * /
<div id="search"></div>
<div class="right-wrapper">
<div id="navigation"></div>
</div>
Eu tenho uma solução muito simples para isso! // HTML
<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
// CSS
#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}
Eu tive um problema semelhante e veio com o seguinte que funcionou bem
CSS:
.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}
HTML:
<div class=top>top </div>
<div>
<div class="left">left </div>
<div class="right">
<div class="content">right </div>
</div>
</div>
Este método não irá quebrar quando a janela é reduzido, mas a vontade auto expandir a área 'conteúdo'. Ele vai manter uma largura estática para o menu do site (esquerda).
E para auto expandindo caixa de conteúdo e deixou a caixa vertical (menu do site) de demonstração:
Tente adicionar relative posição, width remover e float propriedades do lado direito, em seguida, adicione left e right propriedade com valor 0.
Além disso, você pode adicionar regra margin left com o valor é baseado na largura do elemento esquerdo (+ alguns pixels, se você precisa de espaço no meio) para manter sua posição.
Este exemplo está funcionando para mim:
#search {
width: 160px;
height: 25px;
float: left;
background-color: #FFF;
}
#navigation {
display: block;
position: relative;
left: 0;
right: 0;
margin: 0 0 0 166px;
background-color: #A53030;
}
.container {
width:100%;
display:table;
vertical-align:middle;
}
.left {
width:100%;
display:table-cell;
text-align:center;
}
.right {
width:40px;
height:40px;
display:table-cell;
float:right;
}<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
</div
Tente isto. Ela trabalhou para mim.
Tenho vindo a trabalhar sobre este problema por dois dias e ter uma solução que pode funcionar para você e qualquer outra pessoa tentando fazer um responsivo largura fixa à esquerda e tem o preenchimento lado direito no restante da tela, sem envolvimento em torno da esquerda lado. A intenção eu assumo é fazer com que a página responsivo em navegadores, bem como dispositivos móveis.
Aqui está o código
// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps. Without this delay the right div may go off screen when browser is refreshed
setTimeout(function(){
fixRightSideWidth();
$('.right_content_container').show(600);
}, 50);
// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
fixRightSideWidth();
});
function fixRightSideWidth(){
$blockWrap = 300; // Point at which you allow the right div to drop below the top div
$normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
$('.right_content_container').width( $normalRightResize );
$('.right_content_container').css("padding-left","0px");
/* Begin test lines these can be deleted */
$rightrightPosition = $('.right_content_container').css("right");
$rightleftPosition = $('.right_content_container').css("left");
$rightwidthPosition = $('.right_content_container').css("width");
$(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);
/* End test lines these can be deleted */
}
else{
if( $('.right_content_container').width() > 300 ){
$('.right_content_container').width(300);
}
/* Begin test lines these can be deleted */
$rightrightPosition = $('.right_content_container').css("right");
$rightleftPosition = $('.right_content_container').css("left");
$rightwidthPosition = $('.right_content_container').css("width");
$(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);
/* End test lines these can be deleted */
}
if( $thePageRefreshed == true ){
$thePageRefreshed = false;
}
}/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
min-width: 310px;
background: #333;
min-height:100vh;
}
body{
background: #333;
background-color: #333;
color: white;
min-height:100vh;
}
.top_title{
background-color: blue;
text-align: center;
}
.bottom_content{
border: 0px;
height: 100%;
}
.left_right_container * {
position: relative;
margin: 0px;
padding: 0px;
background: #333 !important;
background-color: #333 !important;
display:inline-block;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
font-size: 14px;
font-weight: 400;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
border-radius: 0;
box-sizing: content-box;
transition: none;
}
.left_navigator_item{
display:inline-block;
margin-right: 5px;
margin-bottom: 0px !important;
width: 100%;
min-height: 20px !important;
text-align:center !important;
margin: 0px;
padding-top: 3px;
padding-bottom: 3px;
vertical-align: top;
}
.left_navigator_items {
float: left;
width: 150px;
}
.right_content_container{
float: right;
overflow: visible!important;
width:95%; /* width don't matter jqoery overwrites on refresh */
display:none;
right:0px;
}
.span_text{
background: #eee !important;
background-color: #eee !important;
color: black !important;
padding: 5px;
margin: 0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
<div class="left_right_container">
<div class="left_navigator_items">
<div class="left_navigator_item">Dashboard</div>
<div class="left_navigator_item">Calendar</div>
<div class="left_navigator_item">Calendar Validator</div>
<div class="left_navigator_item">Bulletin Board Slide Editor</div>
<div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
<div class="left_navigator_item">TV Guide</div>
</div>
<div class="right_content_container">
<div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.
Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.
Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.
Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.
In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
</div>
</div>
</div>
Aqui está o meu violino que podem apenas trabalhar para você como ele fez por mim. https://jsfiddle.net/Larry_Robertson/62LLjapm/
html elemento de tabela faz isso por padrão ... Você define tabela de largura, em seguida, as colunas serão sempre abrangem a largura da tabela inteira. O resto é sobre a imaginação
Regras para itens e recipientes;
Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}
Use white-space:. Nowrap; para textos nos últimos itens para sua undestructuring
Item X% | Item Y% | Artigo Z%
Comprimento total sempre = 100%!
se
Item X=50%
Item Y=10%
Item z=20%
então
Item X = 70%
Item X é dominante (primeiros itens são dominantes no layout da tabela CSS)!
Tente max-conteúdo; propriedade para div dentro para espalhar div no recipiente:
div[class="item"] {
...
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
...
}
Corri para este mesmo problema tentando layout de algumas jQueryUI controles. Embora a filosofia comum agora é "uso DIV vez de TABLE", eu encontrei no meu caso usando a tabela funcionou muito melhor. Em particular, se você precisa de ter o alinhamento direto dentro dos dois elementos (por exemplo, a centragem vertical, centralização horizontal, etc.) as opções disponíveis com simples TABELA dar, controles intuitivos para isso.
Aqui está a minha solução:
<html>
<head>
<title>Sample solution for fixed left, variable right layout</title>
<style type="text/css">
#controls {
width: 100%;
}
#RightSide {
background-color:green;
}
</style>
</head>
<body>
<div id="controls">
<table border="0" cellspacing="2" cellpadding="0">
<TR>
<TD>
<button>
FixedWidth
</button>
</TD>
<TD width="99%" ALIGN="CENTER">
<div id="RightSide">Right</div>
</TD>
</TR>
</table>
</div>
</body>
</html>
novo para css. Mas eu resolvi esse problema usando inline-block. vejam isto: http://learnlayout.com/inline-block.html
