Wie kann ich width = 100% – 100px in CSS machen?

Lesezeit: 4 Minuten

fmsf

Wie kann ich in CSS so etwas machen:

width: 100% - 100px;

Ich denke, das ist ziemlich einfach, aber es ist ein bisschen schwierig, Beispiele zu finden, die das zeigen.

Die verlinkte Frage stackoverflow.com/questions/11093943/… gibt eine interessante, aber nicht vollständig abwärtskompatible Antwort, vielleicht möchten Sie auch einen Blick darauf werfen.

– 11684

19. Juni 2012 um 19:23 Uhr
Für jeden, der diese Frage kreuzt, antwortete Chad, dass moderne Browser unterstützt werden width: calc(100% - 100px); Es sind ein paar Antworten darunter und ich hoffe, der Fragesteller wird seine Frage aktualisieren 🙂 🙂

– Anders M.

5. Mai 2014 um 14:20 Uhr

Tschad

Moderne Browser unterstützen jetzt Folgendes:

width: calc(100% - 100px);

Um die Liste der unterstützten Browserversionen anzuzeigen, gehen Sie zur Kasse: Kann ich calc() als CSS-Einheitswert verwenden?

Es gibt einen jQuery-Fallback: css width: calc(100% -100px); alternativ mit jquery

Ich fand, als ich benutzte calc(100% - 6px) zum Beispiel wurde es als angezeigt calc(94%)ich musste es wie folgt entkommen und jetzt funktioniert es width: calc(~"100% - 6px");

– nsilwa

19. April 2016 um 12:53 Uhr
Beachten Sie, dass Sie Leerzeichen um die herum haben müssen - (oder +) Charakter. Das funktioniert: calc(100% - 100px); Und das nicht: calc(100%-100px);

– Freifall

24. März 2017 um 16:19 Uhr
Ich bin ein wenig überrascht, dass es keine Option gibt, automatisch 2x die Polsterung des Elements zu subtrahieren, was normalerweise ein ziemlich häufiger Anwendungsfall wäre. ZB muss ich am Ende tun padding: 0.25em; width: calc(100% - 2 * 0.25em - 2em);und müssten die ändern 0.25em jetzt an zwei Stellen, wenn es geändert werden muss.

– cnst

8. September 2019 um 22:23 Uhr
Vielen Dank, ich möchte auch darauf hinweisen, dass es für die Addition funktioniert: (100% + 100px)

– Viktor Mellgren

14. November 2019 um 10:28 Uhr

Aric TenEyck

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

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

– Susan

20. April 2017 um 6:45 Uhr

barış çıracı

Sie können dies versuchen …

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

vw: Ansichtsfensterbreite

vh: Höhe des Ansichtsfensters

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

– Ben Taliadoros

2. März 2016 um 14:18 Uhr
Ich fand, als ich benutzte calc(100% - 6px) zum Beispiel wurde es als angezeigt calc(94%)ich musste es wie folgt entkommen und jetzt funktioniert es width: calc(~"100% - 6px");

– nsilwa

19. April 2016 um 12:52 Uhr

Alina Babytscheva

Bei mir hat es erst funktioniert, als ich alle Leerzeichen überprüft habe. Also so hat es nicht funktioniert: width: calc(100%- 20px) oder calc(100%-20px) und perfekt damit gearbeitet width: calc(100% - 20px).

Sie benötigen einen Container für Ihr Inhalts-Div, das 100 % – 100 Pixel groß 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 Inhalts-Div überläuft.

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

Das wird nicht funktionieren. Die Inhaltsbreite beträgt 100 %: jsfiddle.net/cuezK/1

– gilly3

19. Juni 2012 um 16:48 Uhr

Nikunj Madhogaria

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>

Das wird nicht funktionieren. Die Inhaltsbreite beträgt 100 %: jsfiddle.net/cuezK/1

– gilly3

19. Juni 2012 um 16:48 Uhr

tvanfosson

Das Festlegen der Körperränder auf 0, die Breite des äußeren Containers auf 100 % und die Verwendung eines inneren Containers mit 50 Pixel 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>

13352900cookie-checkWie kann ich width = 100% – 100px in CSS machen?

#CSS #html