Wie kann ich in CSS width = 100%

153

Wie kann ich in CSS so etwas tun:

width: 100% - 100px;

Ich denke, das ist ziemlich einfach, aber es ist ein bisschen schwierig, Beispiele dafür zu finden.

html css fmsf
quelle

1

Die verknüpfte Frage stackoverflow.com/questions/11093943/… bietet eine interessante, aber nicht vollständig abwärtskompatible Antwort. Vielleicht möchten Sie auch einen Blick darauf werfen.

11684

5

Für alle, die diese Frage kreuzen, hat Chad geantwortet, dass moderne Browser width: calc(100% - 100px);einige Antworten unterstützen, und ich hoffe, der Fragesteller wird seine Frage aktualisieren :) :)

Anders M.

277

Moderne Browser unterstützen jetzt Folgendes:

width: calc(100% - 100px);

So zeigen Sie die Liste der unterstützten Browserversionen an: Kann ich calc () als CSS-Einheitswert verwenden?

Es gibt einen jQuery-Fallback: CSS-Breite: calc (100% -100px); Alternative mit jquery

Tschad
quelle

13

Ich fand, als ich calc(100% - 6px)zum Beispiel verwendete, dass es calc(94%)width: calc(~"100% - 6px");

angezeigt

12

Beachten Sie, dass das -(oder +) Zeichen durch Leerzeichen gekennzeichnet sein muss. Das funktioniert: calc(100% - 100px); Und das geht nicht:calc(100%-100px);

Freifaller

Ich bin ein wenig überrascht, dass es keine Möglichkeit gibt, das Auffüllen des Elements automatisch zweimal zu subtrahieren, was normalerweise ein ziemlich häufiger Anwendungsfall ist. ZB muss ich das am Ende tun padding: 0.25em; width: calc(100% - 2 * 0.25em - 2em);und müsste das jetzt an 0.25emzwei Stellen ändern, wenn es geändert werden muss.

cnst

Vielen Dank, möchte auch darauf hinweisen, dass es für die Hinzufügung funktioniert: (100% + 100px)

Viktor Mellgren

99

Könnten Sie ein Div mit margin-left: 50px;und margin-right: 50px;in einem <div>mit verschachteln width: 100%;?

Aric TenEyck
quelle

4

Breite: calc (100% - 100px); Dies ist stattdessen die richtige Antwort.

Sushan

17

Sie können dies versuchen ...

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

Erweitern Sie das Snippet

vw: Breite des Ansichtsfensters

vh: Höhe des Ansichtsfensters

barış çıracı
quelle

Die erste Lösung ist richtig, der Container ist möglicherweise nicht das Fenster und daher entspricht 100vh möglicherweise nicht 100%

Ben Taliadoros

1

Ich fand, als ich calc(100% - 6px)zum Beispiel verwendete, dass es calc(94%)width: calc(~"100% - 6px");

angezeigt

4

Mein Code, und es funktioniert für 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>

Geben Sie hier die Bildbeschreibung ein

lbsweek
quelle

6

Wofür ist das Javascript?

Faiz

3

Sie benötigen einen Container für Ihr Content-Div, der 100% - 100px sein soll

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

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

Möglicherweise müssen Sie kurz vor dem letzten ein Clearing-Div hinzufügen, </div>wenn Ihr Content-Div überläuft.

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

Aleemb
quelle

1

Dies wird nicht funktionieren. Die Inhaltsbreite beträgt

gilly3

2

Das Setzen der Körperränder auf 0, die Breite des äußeren Containers auf 100% und die Verwendung eines inneren Containers mit 50px linken / rechten Rändern scheint zu funktionieren.

<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
quelle

2

Bei der Arbeit mit Bootstrap-Panels suchte ich nach einer Möglichkeit, einen "Lösch" -Link im Header-Panel zu platzieren, der nicht durch lange Nachbarelemente verdeckt wird. Und hier ist die Lösung:

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

Natürlich können Sie die Werte "top" und "right" entsprechend Ihren Einrückungen ändern. Quelle

Artur Loginov
quelle

2

Es begann für mich erst zu funktionieren, als ich alle Leerzeichen überprüft hatte. Also hat es nicht so funktioniert: width: calc(100%- 20px)oder calc(100%-20px)und es hat perfekt funktioniert width: calc(100% - 20px).

Alina Babycheva
quelle

1

Könntest du tun:

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

Edit: Meine Lösung ist falsch. Die von Aric TenEyck veröffentlichte Lösung, die vorschlägt, ein Div mit einer Breite von 100% zu verwenden und dann ein anderes Div mit den Rändern zu verschachteln, scheint korrekter zu sein.

Tina Orooji
quelle

3

Wenn Sie dies tun, wird die Gesamtbreite dann nicht 100% + 100px betragen?

Adam Crume

: o (Es tut mir leid. Soll ich meinen Beitrag löschen oder soll ich ihn verlassen und die Abstimmungen nach unten drücken lassen?

Tina Orooji

1

Abwärtsstimmen sollen Sie normalerweise dazu ermutigen, Ihren Beitrag zu bereinigen, damit Sie die durch die negativen Stimmen verlorenen Wiederholungspunkte wiedererlangen können. Wenn Sie wissen, dass Ihre Lösung falsch ist, können Sie sie mit oder ohne Abstimmungen löschen oder aktualisieren, um sie richtig zu machen.

Aleemb

@ AdamCrume - Nein. Dies wäre nur dann der Fall, wenn Sie auch angeben width:100%. Ein Div füllt den Container automatisch, es sei denn, Sie überschreiben dies, z. B. durch explizite Angabe widthoder durch Verwendung floatoder absolute Positionierung. Wenn Sie einem Div einen Rand hinzufügen, füllt er nur seinen Container, abzüglich des durch den Rand angegebenen Betrags.

Gilly3

@aleemb - In diesem Fall stammen die Abstimmungen von Benutzern, die CSS nicht verstehen, da diese Antwort vollkommen korrekt ist.

gilly3

1

Das Auffüllen des äußeren Divs erzielt den gewünschten Effekt.

<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
quelle

1

Es gibt zwei Techniken, die für dieses allgemeine Szenario nützlich sein können. Jeder hat seine Nachteile, kann aber manchmal nützlich sein.

Box-Größe: Border-Box enthält Polsterung und Randbreite in der Breite eines Elements. Wenn Sie beispielsweise die Breite eines Divs mit 20px 20px Auffüllung und 1px Rand auf 100px einstellen, beträgt die tatsächliche Breite 142px, aber mit dem Rahmenfeld befinden sich sowohl Auffüllung als auch Rand innerhalb der 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;
}

Hier ist ein ausgezeichneter Artikel dazu: http://css-tricks.com/box-sizing/ und hier ist eine Geige http://jsfiddle.net/L3Rvw/

Und dann ist da noch die Position: absolut

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

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

Beides ist natürlich nicht perfekt, die Boxgröße passt nicht genau zur Frage, da das Element tatsächlich 100% breit ist und nicht 100% - 100px (wie auch immer ein untergeordnetes Div sein würde). Und die absolute Positionierung kann definitiv nicht in jeder Situation verwendet werden, ist aber normalerweise in Ordnung, solange die übergeordnete Höhe eingestellt ist.

Dave
quelle

0

CSS kann nicht für Animationen oder Stiländerungen bei Ereignissen verwendet werden.

Die einzige Möglichkeit besteht darin, eine Javascript-Funktion zu verwenden, die die Breite eines bestimmten Elements zurückgibt, dann 100 Pixel davon subtrahiert und die neue Breitengröße festlegt.

Angenommen, Sie verwenden jQuery, könnten Sie Folgendes tun:

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

Und mit nativem Javascript:

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

Wir gehen davon aus, dass Sie einen CSS-Stil mit 100% festgelegt haben.

Boris Guéry
quelle

0

Verwenden Sie den Standardmodus? Diese Lösung hängt davon ab, denke ich.

Wenn Sie versuchen, zwei Spalten zu erstellen, können Sie Folgendes tun:

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

Verwenden Sie dann CSS, um es zu formatieren:

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

Wenn Sie nicht 2 Spalten möchten, können Sie wahrscheinlich entfernen <div id="left">

hannson
quelle

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.
quelle

0

Sie können die Verwendung von LESS prüfen , einer JavaScript-Datei, die Ihr CSS vorverarbeitet, sodass Sie Logik und Variablen in Ihr CSS aufnehmen können. Für Ihr Beispiel würden Sie in WENIGER schreiben width: 100% - 100px;, um genau das zu erreichen, was Sie wollten :)

Jon
quelle

-1

Das kannst du nicht.

Sie können jedoch Ränder verwenden, um das gleiche Ergebnis zu erzielen.

Traingamer
quelle

-1

Das funktioniert:

margin-right:100px;
width:auto;

user1552559
quelle

1

Könnten Sie bitte Ihrer Antwort eine Erklärung hinzufügen?

Michał Perłakowski

Ich habe versucht: calc (100% -100px) und die Ergebnisse sind nicht auf allen Plattformen / Browsern konsistent. Dann habe ich versucht, wirklich zu vereinfachen und margin-right verwendet: 100px; Breite: auto; und es hat funktioniert ...

user1552559

calc ist eine CSS3-Komponente und dieses CSS funktioniert in den Browsern, die CSS3 unterstützen.

Sushan

-2

Die kurze Antwort lautet: Tun Sie dies NICHT in CSS. Internet Explorer unterstützt sogenannte CSS-Ausdrücke, dies ist jedoch kein Standard und wird definitiv nicht von anderen Browsern wie beispielsweise FireFox unterstützt.

Sie sollten dies besser in JavaScript tun.

Praveen Angyan
quelle

Ja, ich denke, ich muss es in Javascript behalten, ich refraktiere einen Code und wollte das Javascript entfernen, das diese tks gemacht hat.

fmsf

1

Wenn Sie dies vermeiden können, tun Sie dies bitte nicht in JavaScript. HTML + CSS mag schwierig sein und die Lösung mag nicht offensichtlich sein, aber es kann wahrscheinlich fast alles tun, was Sie brauchen. Die Verwendung von JavaScript für statische Layouts ist fast immer eine schlechte Idee.

Nicole

Wie kann ich in CSS width = 100% - 100px ausführen?

Antworten: