Como posso fazer largura = 100%

153

Em CSS, como posso fazer algo assim:

width: 100% - 100px;

Eu acho que isso é bastante simples, mas é um pouco difícil encontrar exemplos mostrando isso.

html css

— fmsf
fonte

1

A pergunta vinculada stackoverflow.com/questions/11093943/… fornece uma resposta interessante, mas não totalmente compatível com versões anteriores, talvez você queira dar uma olhada nisso também.

— 11684

5

Para qualquer um que cruze esta questão Chad respondeu que navegadores modernos suportes width: calc(100% - 100px);É algumas respostas para baixo e espero que o autor da questão irá atualizar a sua pergunta :) :)

— Anders M.

278

Navegadores modernos agora suportam:

width: calc(100% - 100px);

Para ver a lista de versões suportadas do navegador, verifique: Posso usar calc () como valor da unidade CSS?

Há um fallback do jQuery: largura do css: calc (100% -100px); alternativa usando jquery

— Chade
fonte

13

Eu encontrei quando eu estava usando calc(100% - 6px), por exemplo, ele estava exibindo como calc(94%), eu tive que escapar da seguinte forma e agora ele funcionawidth: calc(~"100% - 6px");

— nsilva

12

Esteja ciente de que você deve ter um espaço em branco ao redor do caractere -(ou +). Funciona: calc(100% - 100px); E não:calc(100%-100px);

— freefaller

Estou um pouco surpreso por não haver opção para subtrair automaticamente o dobro do preenchimento do elemento, o que normalmente seria um caso de uso bastante comum. Por exemplo, acabo tendo que fazer padding: 0.25em; width: calc(100% - 2 * 0.25em - 2em);e teria que mudar os 0.25emdois lugares agora, se for necessário alterar.

— CNST

Então, muito obrigado, também gostaria de nota que ele funciona para além: (100% + 100px)

— Viktor Mellgren

99

Você poderia aninhar um div com margin-left: 50px;e margin-right: 50px;dentro de um <div>with width: 100%;?

— Aric TenEyck
fonte

4

largura: calc (100% - 100 px); esta é a resposta correta.

— Sushan

17

Você pode tentar isso ...

<!--First Solution-->
width: calc(100% - 100px);
<!--Second Solution-->
width: calc(100vh - 100px);

Expandir snippet

vw: largura da janela de visualização

vh: altura da janela de visualização

— barış çıracı
fonte

A primeira solução é correcta, o recipiente pode não ser a janela e, por conseguinte, 100vh pode não ser igual a 100%

— Ben Taliadoros

1

Eu encontrei quando eu estava usando calc(100% - 6px), por exemplo, ele estava exibindo como calc(94%), eu tive que escapar da seguinte forma e agora ele funcionawidth: calc(~"100% - 6px");

— nsilva

4

meu código e funciona para o IE6:

<style>
#container {margin:0 auto; width:100%;}
#header { height:100px; background:#9c6; margin-bottom:5px;}
#mainContent { height:500px; margin-bottom:5px;}
#sidebar { float:left; width:100px; height:500px; background:#cf9;}
#content { margin-left:100px; height:500px; background:#ffa;}

</style>

<div id="container">
  <div id="header">header</div>
  <div id="mainContent">
    <div id="sidebar">left</div>
    <div id="content">right 100% - 100px</div>
  <span style="display:none"></span></div>
</div>

insira a descrição da imagem aqui

— lbsweek
fonte

6

Para que serve esse Javascript?

— Faiz

3

Você precisa ter um contêiner para sua div de conteúdo que deseja ser 100% - 100px

#container {
   width: 100%
}
#content {
   margin-right:100px;
   width:100%;
}

<div id="container">
  <div id="content">
      Your content here
  </div>
</div>

Pode ser necessário adicionar uma div de limpeza imediatamente antes da última, </div>se a div de conteúdo estiver excedendo.

<div style="clear:both; height:1px; line-height:0">&nbsp;</div>

— aleemb
fonte

1

Isso não vai funcionar. A largura do conteúdo será 100%: jsfiddle.net/cuezK/1 #

— gilly3

2

Definir as margens do corpo como 0, a largura do contêiner externo para 100% e usar um contêiner interno com margens de 50px esquerda / direita parece funcionar.

<style>
body {
    margin: 0;
    padding: 0;
}

.full-width
{
    width: 100%;
}

.innerContainer
{
    margin: 0px 50px 0px 50px;
}
</style>

<body>
  <div class="full-width" style="background-color: #ff0000;">
    <div class="innerContainer" style="background-color: #00ff00;">
      content here
    </div>
  </div>
</body>

— tvanfosson
fonte

2

Trabalhando com painéis de inicialização, eu estava procurando como colocar o link "excluir" no painel de cabeçalho, que não seria obscurecido pelo elemento vizinho longo. E aqui está a solução:

html:

<div class="with-right-link">
    <a class="left-link" href="#">Long link header Long link header</a>
    <a class="right-link" href="#">Delete</a>
</div>

css:

.with-right-link { position: relative; width: 275px; }
a.left-link { display: inline-block; margin-right: 100px; }
a.right-link { position: absolute; top: 0; right: 0; }

É claro que você pode modificar os valores "superior" e "correto", de acordo com seus recuos. Fonte

— Artur Loginov
fonte

2

Começou a funcionar para mim apenas quando verifiquei todos os espaços. Portanto, não funcionou assim: width: calc(100%- 20px)ou calc(100%-20px)e funcionou perfeitamente width: calc(100% - 20px).

— Alina Babycheva
fonte

1

Você poderia fazer:

margin-right: 50px;
margin-left: 50px;

Edit: Minha solução está errada. A solução postada por Aric TenEyck sugerindo o uso de uma div com largura 100% e, em seguida, aninhando outra div usando as margens parece mais correta.

— Tina Orooji
fonte

3

Se você fizer isso, não terá a largura total de 100% + 100px?

— 22120 Adam Crume

: o (Lamento que eu deveria apagar o meu post ou devo deixá-lo e deixar que os votos para baixo empurrá-lo para baixo.?

— Tina Orooji

1

votos baixos geralmente servem para encorajá-lo a limpar sua postagem para recuperar pontos de representação perdidos pelos votos negativos. Se você sabe que sua solução está errada, você pode excluir se com ou sem votos negativos ou atualizá-la para torná-la correta.

— Aleemb 22/05/09

@AdamCrume - Não. Esse seria o caso apenas se você também especificou width:100%. Uma div preencherá automaticamente o contêiner, a menos que você o substitua, por exemplo, especificando explicitamente widthou usando floatou posicionamento absoluto. Adicionar uma margem a uma div fará com que ela preencha seu contêiner, menos a quantidade especificada pela margem.

— gilly3

@aleemb - Nesse caso, os votos negativos são de usuários que não entendem css, pois esta resposta está perfeitamente correta.

— gilly3

1

O preenchimento na div externa obterá o efeito desejado.

<html>
<head>
<style>
    #outer{
        padding: 0 50px;
        border:1px solid black; /*for visualization*/
    }

    #inner{
        border:1px solid red; /*for visualization*/
    }
</style>
</head>
<body>
<div id="outer">
    <div id="inner">
        100px smaller than outer
    </div>
</div>
</body>
</html>

— Josh Bush
fonte

1

Existem 2 técnicas que podem ser úteis para esse cenário comum. Cada um tem suas desvantagens, mas pode ser útil às vezes.

dimensionamento de caixa: a caixa de borda inclui preenchimento e largura da borda na largura de um item. Por exemplo, se você definir a largura de uma div com preenchimento de 20 px e borda de 1 px como 100 px, a largura real será 142 px, mas com caixa de borda, o padding e a margem estarão dentro dos 100 px.

.bb{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;     
    width: 100%;
    height:200px;
    padding: 50px;
}

Aqui está um excelente artigo: http://css-tricks.com/box-sizing/ e aqui está um violino http://jsfiddle.net/L3Rvw/

E depois há a posição: absoluta

.padded{
    position: absolute;
    top: 50px;
    right: 50px;
    left: 50px;
    bottom: 50px;
    background-color: #aefebc;
}

http://jsfiddle.net/Mw9CT/1/

Nem é perfeito, é claro, o tamanho da caixa não se encaixa exatamente na questão, pois o elemento é na verdade 100% de largura, em vez de 100% - 100px (no entanto, uma div filho seria). E o posicionamento absoluto definitivamente não pode ser usado em todas as situações, mas geralmente é bom desde que a altura dos pais esteja definida.

— Dave
fonte

0

CSS não pode ser usado para animação ou qualquer modificação de estilo em eventos.

A única maneira é usar uma função javascript, que retornará a largura de um determinado elemento, subtrair 100px para ele e definir o novo tamanho da largura.

Supondo que você esteja usando jQuery, você poderia fazer algo assim:

oldWidth = $('#yourElem').width();
$('#yourElem').width(oldWidth-100);

E com javascript nativo:

oldWidth = document.getElementById('yourElem').clientWidth;
document.getElementById('yourElem').style.width = oldWidth-100+'px';

Supomos que você tenha um estilo css definido com 100%;

— Boris Guéry
fonte

0

Você está usando o modo de padrões? Esta solução depende disso, eu acho.

Se você está tentando criar duas colunas, pode fazer algo assim:

<div id="outer">
    <div id="left">
        sidebar
    </div>
    <div id="main">
        lorem ispsum etc... 
    </div>
</div>

Em seguida, use CSS para estilizá-lo:

div#outer
{
    width:100%;
    height: 500px;
}

div#left
{
    width: 100px;
    height: 100%;
    float:left;
    background: green;
}

div#main
{
   width: auto;
   margin-left: 100px; /* same as div#left width */
   height: 100%;
   background:red;
}

Se você não quiser duas colunas, provavelmente poderá remover <div id="left">

— hannson
fonte

0

<div style="width: 200px; border: 1px solid red;">
    <br>
    <div style="margin: 0px 50px 0px 50px; border: 1px solid blue;">
        <br>
    </div>
    <br>
</div>

— RC.
fonte

0

Você pode usar o LESS , que é um arquivo JavaScript que pré-processa seu CSS para incluir lógica e variáveis em seu CSS. Portanto, para o seu exemplo, em MENOS, você escreveria width: 100% - 100px;para obter exatamente o que queria :)

— Jon
fonte

-1

Você não pode.

Você pode, no entanto, usar margens para efetuar o mesmo resultado.

— Traingamer
fonte

-1

Isso funciona:

margin-right:100px;
width:auto;

— user1552559
fonte

1

Você poderia adicionar uma explicação para sua resposta?

— Michał Perłakowski

Eu tentei: calc (100% -100px) e os resultados não são consistentes em todas as plataformas / navegadores; tentei realmente simplificar e usei a margem direita: 100px; largura: auto; e funcionou ...

— user1552559

calc é um componente CSS3 e esse css funcionará nos navegadores que suportam CSS3.

— Sushan

-2

A resposta curta é que você NÃO faz isso em CSS. O Internet Explorer tem suporte para algo chamado Expressões CSS, mas isso não é padrão e definitivamente não é suportado por outros navegadores como o FireFox, por exemplo.

Seria melhor fazer isso em JavaScript.

— Praveen Angyan
fonte

Sim, acho que vou ter que mantê-lo em javascript, estou refratando algum código e queria remover o javascript que estava fazendo isso tks.

— Fmsf 22/05/09

1

Por favor, se você puder evitá-lo, não faça isso em JavaScript. HTML + CSS pode ser complicado e a solução pode não ser óbvia, mas provavelmente pode fazer quase tudo o que você precisa. Usar JavaScript para layouts estáticos é quase sempre uma má idéia.

— Nicole

Como posso fazer largura = 100% - 100px em CSS?