Wie wird die Dicke des Randes in Prozent festgelegt?

Wie wird die Rahmenbreite eines Elements in Prozent festgelegt? Ich habe die Syntax ausprobiert

border-width:10%;

Aber es funktioniert nicht.

Der Grund, warum ich border-widthProzentsätze festlegen möchte, ist, dass ich ein Element mit width: 80%;und habe height: 80%;und dass das Element das gesamte Browserfenster abdeckt. Daher möchte ich alle Rahmen auf 10% festlegen. Ich mache dies nicht mit der Zwei-Elemente-Methode, bei der eines hinter dem anderen positioniert wird und als Rand fungiert, da der Hintergrund des Elements transparent ist und das Positionieren eines Elements dahinter die Transparenz beeinträchtigen würde.

Ich weiß, dass dies über JavaScript möglich ist, aber ich suche nach einer CSS-Methode, wenn möglich.

Border unterstützt keinen Prozentsatz ... aber es ist immer noch möglich ...

Wie andere auf die CSS-Spezifikation hingewiesen haben , werden Prozentsätze an den Grenzen nicht unterstützt:

'border-top-width',
'border-right-width',
'border-bottom-width',
'border-left-width'
  Value:          <border-width> | inherit
  Initial:        medium
  Applies to:     all elements
  Inherited:      no
  Percentages:    N/A
  Media:          visual
  Computed value: absolute length; '0' if the border style is 'none' or 'hidden'

Wie Sie sehen , es sagt Prozentwerte : N / A .

Lösung ohne Skript

Sie können Ihre prozentualen Ränder mit einem Wrapper-Element simulieren, wo Sie:

1. Stellen Sie die Wrapper-Elemente background-colorauf die gewünschte Rahmenfarbe ein
2. Legen Sie die Wrapper-Elemente paddingin Prozent fest (weil sie unterstützt werden).
3. Setzen Sie Ihre Elemente background-colorauf Weiß (oder was auch immer es sein muss)

Dies würde irgendwie Ihre prozentualen Grenzen simulieren. Hier ist ein Beispiel eines Elements mit 25% Breiter Seitengrenzen , die diese Technik verwendet.

Im Beispiel verwendetes HTML

.faux-borders {
    background-color: #f00;
    padding: 1px 25%; /* set padding to simulate border */
}
.content {
    background-color: #fff;
}

<div class="faux-borders">
    <div class="content">
        This is the element to have percentage borders.
    </div>
</div>

Problem: Sie müssen sich bewusst sein, dass dies viel komplizierter ist, wenn auf Ihr Element ein komplexer Hintergrund angewendet wird ... Insbesondere, wenn dieser Hintergrund von der DOM-Hierarchie der Vorfahren geerbt wird. Wenn Ihre Benutzeroberfläche jedoch einfach genug ist, können Sie dies auf diese Weise tun.

Skriptlösung

@BoltClock erwähnte eine Skriptlösung, mit der Sie die Rahmenbreite programmgesteuert anhand der Elementgröße berechnen können.

Dies ist ein solches Beispiel mit einem extrem einfachen Skript, das jQuery verwendet.

var el = $(".content");
var w = el.width() / 4 | 0; // calculate & trim decimals
el.css("border-width", "1px " + w + "px");

.content { border: 1px solid #f00; }

<div class="content">
    This is the element to have percentage borders.
</div>

Sie müssen sich jedoch bewusst sein, dass Sie die Rahmenbreite jedes Mal anpassen müssen, wenn sich Ihre Containergröße ändert (dh die Größe des Browserfensters ändert ). Meine erste Problemumgehung mit dem Wrapper-Element scheint viel einfacher zu sein, da die Breite in diesen Situationen automatisch angepasst wird.

Die positive Seite der Skriptlösung ist, dass sie nicht unter Hintergrundproblemen leidet, die in meiner vorherigen Lösung ohne Skript erwähnt wurden.

Sie können auch verwenden

border-left: 9vw solid #F5E5D6;
border-right: 9vw solid #F5E5D6;     

ODER

border: 9vw solid #F5E5D6;

Dies ist also eine ältere Frage, aber für diejenigen, die noch nach einer Antwort suchen, ist die CSS-Eigenschaft Box-Sizing hier von unschätzbarem Wert:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit  */
-moz-box-sizing: border-box;    /* Firefox, other Gecko         */
box-sizing: border-box; 

Dies bedeutet, dass Sie die Breite des Div auf einen Prozentsatz festlegen können und jeder Rand, den Sie dem Div hinzufügen, in diesem Prozentsatz enthalten ist. So würde beispielsweise das Folgende den 1px-Rand an der Innenseite der Breite des div hinzufügen:

div { box-sizing:border-box; width:50%; border-right:1px solid #000; }         

Wenn Sie weitere Informationen wünschen : http://css-tricks.com/box-sizing/

Prozentwerte gelten nicht für border-widthCSS. Dies ist in der Spezifikation aufgeführt .

Sie müssen JavaScript verwenden, um den Prozentsatz der Breite des Elements oder die benötigte Längenmenge zu berechnen und das Ergebnis in pxoder ähnlich den Rahmen des Elements anzuwenden .

Sie können sie als Prozentsatz anstelle von Pixeln verwenden.

Beispiel:

border:10PX dotted #c1a9ff; /* In Pixels */
border:0.75em dotted #c1a9ff; /* Exact same as above in Percentage */

Moderne Browser unterstützen vh- und vw-Einheiten , die einen Prozentsatz des Fensteransichtsfensters ausmachen.

Sie können also reine CSS-Rahmen als Prozentsatz der Fenstergröße verwenden:

border: 5vw solid red;

Probieren Sie dieses Beispiel aus und ändern Sie die Fensterbreite. Der Rand ändert seine Dicke, wenn sich die Größe des Fensters ändert. box-sizing: border-box;kann auch nützlich sein.

Box-
Größe Stellen Sie die Box-Größe auf Rahmen ein box-sizing: border-box;und stellen Sie die Breite auf 100% und eine feste Breite für den Rand ein. Fügen Sie dann eine Mindestbreite hinzu, damit bei einem kleinen Bildschirm der Rand nicht den gesamten Bildschirm überholt

Sie können einen benutzerdefinierten Rahmen mithilfe einer Spanne erstellen. Erstellen Sie eine Spanne mit einer Klasse (Angabe der Richtung, in die der Rand verläuft) und einer ID:

<html>
    <body>
        <div class="mdiv">
            <span class="VerticalBorder" id="Span1"></span>
            <header class="mheader">
                <span class="HorizontalBorder" id="Span2"></span>
            </header>
        </div>
    </body>
</html>

Dann gehen Sie auf Sie CSS und stellen Sie die Klasse position:absolute, height:100%(für vertikale Grenzen), width:100%(für horizontale Grenzen), margin:0%und background-color:#000000;. Fügen Sie alles hinzu, was noch nötig ist:

body{
    margin:0%;
}

div.mdiv{
    position:absolute;
    width:100%;
    height:100%;
    top:0%;
    left:0%;
    margin:0%;
}

header.mheader{
    position:absolute;
    width:100%;
    height:20%; /* You can set this to whatever. I will use 20 for easier calculations. You don't need a header. I'm using it to show you the difference. */
    top:0%;
    left:0%;
    margin:0%;
}

span.HorizontalBorder{
    position:absolute;
    width:100%;
    margin:0%;
    background-color:#000000;
}

span.VerticalBorder{
    position:absolute;
    height:100%;
    margin:0%;
    background-color:#000000;
}

Dann die ID festgelegt , dass entspricht class="VerticalBorder"auf top:0%;, left:0%;, width:1%;(Da die Breite des MDiv auf die Breite des mheader bei 100% gleich ist, wird die Breite 100% von dem , was Sie es einrichten. Wenn Sie die Breite auf 1% gesetzt die Der Rand beträgt 1% der Fensterbreite. Stellen Sie die ID ein, die dem class="HorizontalBorder"to entspricht top:99%(Da es sich in einem Kopfzeilencontainer befindet, bezieht sich die Oberseite auf die Position, in der es sich gemäß der Kopfzeile befindet. Diese + Höhe sollte sich zu 100% addieren, wenn Sie möchten, dass sie die Unterseite erreicht) left:0%;und height:1%(Da die Höhe des mdiv 5-mal größer ist als die Höhe des mheader [100% = 100, 20% = 20, 100/20 = 5], beträgt die Höhe 20% der von Ihnen eingestellten Höhe. Wenn Sie die Höhe einstellen bis 1% beträgt der Rand 0,2% der Fensterhöhe. So wird es aussehen:

span#Span1{
    top:0%;
    left:0%;
    width:.4%;
}
span#Span2{
    top:99%;
    left:0%;
    width:1%;
}

HAFTUNGSAUSSCHLUSS: Wenn Sie die Größe des Fensters auf eine ausreichend kleine Größe ändern, verschwinden die Ränder. Eine Lösung wäre, die Größe des Rahmens zu begrenzen, wenn die Größe des Fensters auf einen bestimmten Punkt geändert wird. Folgendes habe ich getan:

window.addEventListener("load", Loaded);

function Loaded() {
  window.addEventListener("resize", Resized);

  function Resized() {
    var WindowWidth = window.innerWidth;
    var WindowHeight = window.innerHeight;
    var Span1 = document.getElementById("Span1");
    var Span2 = document.getElementById("Span2");
    if (WindowWidth <= 800) {
      Span1.style.width = .4;
    }
    if (WindowHeight <= 600) {
      Span2.style.height = 1;
    }
  }
}

Wenn Sie alles richtig gemacht haben, sollte es so aussehen, wie es in diesem Link ist: https://jsfiddle.net/umhgkvq8/12/ Aus irgendeinem Grund verschwindet der Rand in jsfiddle, aber nicht, wenn Sie ihn in einem Browser starten .

Schauen Sie sich die calc () - Spezifikation an . Hier ist ein Anwendungsbeispiel:

border-right:1px solid;
border-left:1px solid;
width:calc(100% - 2px);