Come posso fare larghezza = 100%

153

In CSS, come posso fare qualcosa del genere:

width: 100% - 100px;

Immagino che questo sia abbastanza semplice ma è un po 'difficile trovare esempi che lo dimostrino.

html css

— FMSF
fonte

1

La domanda collegata stackoverflow.com/questions/11093943/… fornisce una risposta interessante, ma non completamente compatibile con le versioni precedenti, forse ti piacerebbe dare un'occhiata anche a quella.

— 11684

5

Per chiunque abbia risposto a questa domanda Chad ha risposto che i browser moderni supportano width: calc(100% - 100px);alcune risposte in basso e spero che il richiedente aggiornerà la sua domanda :) :)

— Anders M.,

278

I browser moderni ora supportano:

width: calc(100% - 100px);

Per visualizzare l'elenco delle versioni di browser supportate alla cassa: Posso usare calc () come valore di unità CSS?

Esiste un fallback jQuery: larghezza css: calc (100% -100px); alternativa usando jquery

— Chad
fonte

13

Ho scoperto che quando stavo usando, calc(100% - 6px)ad esempio, stava visualizzando come calc(94%), dovevo scappare come segue e ora funzionawidth: calc(~"100% - 6px");

— nsilva,

12

Attenzione, è necessario disporre di spazi bianchi attorno al carattere -(o +). Funziona: calc(100% - 100px); E questo non:calc(100%-100px);

— freefaller

Sono un po 'sorpreso che non ci sia alcuna opzione per sottrarre automaticamente il doppio dell'imbottitura dell'elemento, che di solito sarebbe un caso d'uso piuttosto comune. Ad esempio, alla fine devo fare padding: 0.25em; width: calc(100% - 2 * 0.25em - 2em);, e dovrei cambiare il 0.25emin due punti ora se deve essere modificato.

— CNST

Mille grazie, vorrei anche notare che funziona per l'aggiunta: (100% + 100px)

— Viktor Mellgren

99

Potresti nidificare un div con margin-left: 50px;e margin-right: 50px;dentro un <div>con width: 100%;?

— Aric TenEyck
fonte

4

larghezza: calc (100% - 100px); questa è invece la risposta corretta.

— Sushan,

17

Puoi provare questo ...

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

Espandi frammento

vw: larghezza della finestra

vh: altezza del viewport

— barış çıracı
fonte

La prima soluzione è corretta, il contenitore potrebbe non essere la finestra e quindi 100vh potrebbe non essere uguale al 100%

— Ben Taliadoros

1

Ho scoperto che quando stavo usando calc(100% - 6px)ad esempio era visualizzato come calc(94%), dovevo scappare come segue e ora funzionawidth: calc(~"100% - 6px");

— nsilva,

4

il mio codice e funziona per 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>

inserisci qui la descrizione dell'immagine

— lbsweek
fonte

6

A cosa serve Javascript?

— Faiz,

3

Devi disporre di un contenitore per i tuoi div di contenuto che desideri essere al 100% - 100 px

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

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

Potrebbe essere necessario aggiungere un div di compensazione poco prima dell'ultimo </div>se il div del contenuto è in overflow.

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

— aleemb
fonte

1

Questo non funzionerà. La larghezza del contenuto sarà del 100%: jsfiddle.net/cuezK/1

— gilly3

2

Impostando i margini del corpo su 0, la larghezza del contenitore esterno al 100% e l'utilizzo di un contenitore interno con margini sinistro / destro di 50 px sembra funzionare.

<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

Lavorando con i pannelli bootstrap, stavo cercando come posizionare il link "elimina" nel pannello dell'intestazione, che non sarebbe stato oscurato dall'elemento lungo vicino. Ed ecco la soluzione:

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; }

Ovviamente puoi modificare i valori "top" e "right", in base alle tue rientranze. fonte

— Artur Loginov
fonte

2

Ha iniziato a funzionare per me solo quando ho controllato tutti gli spazi. Quindi, non ha funzionato così: width: calc(100%- 20px)o ha calc(100%-20px)funzionato perfettamente width: calc(100% - 20px).

— Alina Babycheva
fonte

1

Potresti fare:

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

Modifica: la mia soluzione è sbagliata. La soluzione pubblicata da Aric TenEyck che suggerisce di usare un div con una larghezza del 100% e quindi annidare un altro div usando i margini sembra più corretta.

— Tina Orooji
fonte

3

Se lo fai, non finirai con una larghezza totale del 100% + 100 px?

— Adam Crume,

: o (mi dispiace. Devo cancellare il mio post o dovrei lasciarlo e lasciare che i voti

— negativi

1

i voti negativi di solito hanno lo scopo di incoraggiarti a ripulire il tuo post in modo da poter riguadagnare punti rep persi dai voti negativi. Se sai che la tua soluzione è sbagliata, puoi eliminare se con o senza voti negativi o aggiornarla per renderla corretta.

— aleemb,

@AdamCrume - No. Questo sarebbe solo il caso se anche specificato width:100%. Un div riempirà automaticamente il contenitore a meno che non lo si ignori, ad esempio specificando esplicitamente widtho utilizzando floato il posizionamento assoluto. L'aggiunta di un margine a un div farà sì che riempia il suo contenitore, meno l'importo specificato dal margine.

— gilly3,

@aleemb - In questo caso i voti negativi sono degli utenti che non capiscono il CSS in quanto questa risposta è perfettamente corretta.

— gilly3,

1

L'imbottitura sul div esterno otterrà l'effetto desiderato.

<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

Esistono 2 tecniche che possono tornare utili per questo scenario comune. Ognuno ha i suoi svantaggi, ma a volte possono essere entrambi utili.

dimensionamento scatola: bordo-scatola include imbottitura e larghezza del bordo nella larghezza di un elemento. Ad esempio, se si imposta la larghezza di un div con riempimento 20px 20px e bordo 1px su 100px, la larghezza effettiva sarebbe 142px ma con bordo-riquadro, sia il padding che il margine sono all'interno del 100px.

.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;
}

Ecco un eccellente articolo su di esso: http://css-tricks.com/box-sizing/ ed ecco un violino http://jsfiddle.net/L3Rvw/

E poi c'è la posizione: assoluta

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

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

Né sono perfetti ovviamente, il ridimensionamento della scatola non si adatta esattamente alla domanda in quanto l'elemento ha in realtà una larghezza del 100%, piuttosto che del 100% - 100px (comunque sarebbe un div figlio). E il posizionamento assoluto sicuramente non può essere utilizzato in ogni situazione, ma di solito va bene finché è impostata l'altezza del genitore.

— Dave
fonte

0

I CSS non possono essere utilizzati per l'animazione o qualsiasi modifica di stile sugli eventi.

L'unico modo è utilizzare una funzione javascript, che restituirà la larghezza di un dato elemento, quindi sottrargli 100px e impostare la nuova dimensione della larghezza.

Supponendo che tu stia utilizzando jQuery, potresti fare qualcosa del genere:

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

E con javascript nativo:

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

Supponiamo che tu abbia uno stile CSS impostato al 100%;

— Boris Guéry
fonte

0

Stai usando la modalità standard? Questa soluzione dipende da essa, penso.

Se stai cercando di creare 2 colonne, potresti fare qualcosa del genere:

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

Quindi utilizzare CSS per modellarlo:

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 non vuoi 2 colonne, puoi probabilmente rimuoverle <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

Puoi esaminare LESS , che è un file JavaScript che pre-elabora il tuo CSS in modo da poter includere logica e variabili nel tuo CSS. Quindi, per il tuo esempio, in MENO scriveresti width: 100% - 100px;per ottenere esattamente quello che volevi :)

— Jon
fonte

-1

Non puoi.

Tuttavia, è possibile utilizzare i margini per ottenere lo stesso risultato.

— Traingamer
fonte

-1

Questo funziona:

margin-right:100px;
width:auto;

— user1552559
fonte

1

Potresti per favore aggiungere una spiegazione alla tua risposta?

— Michał Perłakowski il

Ho provato: calc (100% -100px) ei risultati non sono coerenti su tutte le piattaforme / browser, quindi ho cercato di semplificare davvero e ho usato margin-right: 100px; width: auto; e ha funzionato ...

— user1552559

calc è un componente CSS3 e questo CSS funzionerà su quei browser che supportano CSS3.

— Sushan,

-2

La risposta breve è che NON lo fai nei CSS. Internet Explorer ha il supporto per qualcosa chiamato espressioni CSS, ma questo non è standard e sicuramente non è supportato da altri browser come FireFox per esempio.

Faresti meglio a farlo in JavaScript.

— Praveen Angyan
fonte

Sì, suppongo che dovrò tenerlo in javascript, sto rifrangendo del codice e volevo rimuovere il javascript che stava facendo quel tks.

— fmsf,

1

Per favore, se puoi evitarlo, non farlo in JavaScript. HTML + CSS può essere complicato e la soluzione potrebbe non essere ovvia, ma probabilmente può fare quasi tutto ciò di cui hai bisogno. L'uso di JavaScript per i layout statici è quasi sempre una cattiva idea.

— Nicole,

Come posso fare larghezza = 100% - 100 px in CSS?