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

In CSS, come posso fare qualcosa di simile:Come posso fare width = 100% - 100px in CSS?

width: 100% - 100px;

Credo che questo è abbastanza semplice, ma è un po 'difficile trovare esempi che dimostrano che.

fonte

2009-05-22 fmsf

La domanda collegata http://stackoverflow.com/questions/11093943/is-it-possible-to-make-a-div-50px-less-than-100-in-css?newsletter=1&nlcode=78829% 7c765d offre una risposta interessante, ma non del tutto compatibile, forse vorresti dare un'occhiata anche a questo. – 11684

Per chi supera questa domanda Chad risponde che i browser moderni supportano 'width: calc (100% - 100px);' sono poche risposte e spero che il richiedente aggiorni la sua domanda :) :) –

181

browser moderni supportano ora il:

width: calc(100% - 100px);

per visualizzare l'elenco delle versioni di browser supportati cassa: Can I use calc() as CSS unit value?

C'è un ripiego jQuery: css width: calc(100% -100px); alternative using jquery

fonte

2013-01-16 20:30:59 Chad

Ho trovato quando stavo usando 'calc (100% - 6px)' per esempio era visualizzato come 'calc (94%)', ho dovuto scappare come segue e ora funziona 'width: calc (~ "100% - 6px"); ' – nsilva

Questa dovrebbe essere la risposta corretta – codestr

Questa risposta dovrebbe apparire vicino alla parte superiore con così tanti upvotes. –

-1

La risposta breve è NON farlo in CSS. Internet Explorer ha il supporto per qualcosa chiamato CSS Expressions, ma questo non è standard e non è sicuramente supportato da altri browser come FireFox, per esempio.

Faresti meglio a farlo in JavaScript.

fonte

2009-05-22 17:55:54

Sì, credo che avrò per mantenerlo in javascript, sto rifacendo un po 'di codice e volevo rimuovere il javascript che stava facendo quel tks. – fmsf

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

-1

Non è possibile.

È tuttavia possibile utilizzare i margini per ottenere lo stesso risultato.

fonte

2009-05-22 17:56:14 Traingamer

Puoi fare:

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

Edit: La mia soluzione è sbagliata. La soluzione postata da Aric TenEyck che suggerisce di usare un div con larghezza 100% e quindi nidificare un altro div usando i margini sembra più corretta.

fonte

2009-05-22 17:56:15

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

testati, non funziona sry :( – fmsf

: o (Mi dispiace, dovrei cancellare il mio post o dovrei lasciarlo e lasciare che i voti bassi lo spingano verso il basso? –

Potrebbe nidificare un div con margin-left: 50px; e margin-right: 50px; all'interno di un <div> con width: 100%;?

fonte

2009-05-22 17:57:06

Questo non funziona. –

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

Il CSS non può essere utilizzato per l'animazione o qualsiasi modifica di stile sugli eventi.

L'unico modo è utilizzare una funzione javascript, che restituisce la larghezza di un dato elemento, quindi sottraendo 100px ad esso e imposta la nuova larghezza.

Supponendo che si sta utilizzando jQuery, si potrebbe fare qualcosa di simile:

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

E con javascript origini:

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

Partiamo dal presupposto che avete uno stile css set con il 100%;

fonte

2009-05-22 17:57:45

Non penso che coinvolgere javascript qui sia una buona idea –

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

fonte

2009-05-22 18:04:07

È necessario disporre di un contenitore per il vostro div contenuto che si desidera essere al 100% - 100px

#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 compensazione e prima dell'ultima </div> se il contenuto div è straripante

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

fonte

2009-05-22 18:18:30 aleemb

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

Impostazione dei margini corpo a 0, la larghezza del contenitore esterno al 100%, e con un contenitore interno con 50px margini sinistro/destro 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>

fonte

2009-05-22 18:19:11 tvanfosson

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>

fonte

2009-05-22 18:19:51

Stai utilizzando la modalità standard? Questa soluzione dipende da ciò che penso.

Se stai cercando di fare 2 colonne si potrebbe fare qualcosa di simile:

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

Quindi utilizzare i CSS per lo stile che:

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 si desidera 2 colonne può probabilmente rimuovere <div id="left">

fonte

2009-05-22 18:20:04 hannson

È possibile esaminare utilizzando LESS, che è un file JavaScript che pre-elabora il CSS in modo da poter includere la logica e le variabili in il tuo CSS. Così, per il tuo esempio, in meno si può scrivere width: 100% - 100px; per ottenere esattamente quello che voleva :)

fonte

2012-09-17 17:24:39 Jon

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>

enter image description here

fonte

2013-11-26 17:43:18 lbsweek

A cosa serve Javascript? – Faiz

Ci sono 2 tecniche che possono tornare utili per questo scenario comune. Ognuno ha i suoi svantaggi, ma può essere utile a volte.

riquadratura di riquadri: border box include il riempimento e la larghezza del bordo nella larghezza di un articolo. Ad esempio, se si imposta la larghezza di un div con 20px 20px padding e 1px border a 100px, la larghezza effettiva sarebbe 142px ma con border-box, sia padding che margin 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 articolo eccellente su di esso: http://css-tricks.com/box-sizing/ ed ecco un violino http://jsfiddle.net/L3Rvw/

E poi c'è position: absolute

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

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

Né sono perfetti, ovviamente, il dimensionamento della casella non corrisponde esattamente alla domanda in quanto l'elemento è in realtà 100% di larghezza, piuttosto che 100% - 100 px (tuttavia sarebbe un div bambino). E il posizionamento assoluto sicuramente non può essere utilizzato in ogni situazione, ma di solito è ok purché sia impostata l'altezza genitore.

fonte

2014-03-22 04:28:31 Dave

-1

Questo funziona:

margin-right:100px; 
width:auto;

fonte

2016-01-22 16:25:13 user1552559

Potresti aggiungere una spiegazione alla tua risposta? –

Ho provato: calc (100% -100px) e i risultati non sono coerenti su tutte le piattaforme/browser, quindi ho provato a semplificare e utilizzare realmente margin-right: 100px; larghezza: auto; e ha funzionato ... – user1552559

calc è componente CSS3 e questo css funzionerà su quei browser che supporta CSS3. – Sushan

Si può provare questo ...

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

vw: larghezza finestra

VH: altezza finestra

fonte

2016-02-11 08:38:57

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

Ho trovato quando stavo usando 'calc (100% - 6px)' per esempio era visualizzato come 'calc (94%)' , Ho dovuto scappare come segue e ora funziona 'width: calc (~" 100% - 6px ");' – nsilva

Lavorare con pannelli di bootstrap, stavo cercando il modo di inserire il "delete" collegamento nel pannello di intestazione, che avrebbe non essere oscurato da un elemento a lungo termine. 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; }

Naturalmente è possibile modificare i valori "giusti" "top" e, in base alle vostre rientranze. Source

fonte

2016-03-07 14:05:25

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

fonte

2017-05-25 09:48:57

Bene che lo mostri, ho anche riscontrato questo problema –

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

risposta

Problemi correlati