Yüzde olarak kenarlığın kalınlığı nasıl belirlenir?

Yüzde olarak bir elemanın sınır genişliği nasıl ayarlanır? Sözdizimini denedim

border-width:10%;

Ama işe yaramıyor.

border-widthYüzde olarak ayarlamak istememin nedeni , ve ile bir öğem olması width: 80%;ve height: 80%;öğenin tüm tarayıcı penceresini kaplamasını istiyorum, bu nedenle tüm sınırları% 10 ayarlamak istiyorum. Bunu, birinin diğerinin arkasına yerleştirilip sınır görevi gördüğü iki öğe yöntemiyle yapmıyorum, çünkü öğenin arka planı şeffaftır ve bir öğeyi arkasına yerleştirmek şeffaflığını etkiler.

Bunun JavaScript aracılığıyla yapılabileceğini biliyorum, ancak mümkünse yalnızca CSS yöntemini arıyorum.

Sınır yüzdeyi desteklemiyor ... ama yine de mümkün ...

Diğerlerinin CSS spesifikasyonuna işaret ettiği gibi, sınırlarda yüzdeler desteklenmez:

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

Eğer gibi bakın diyor N / A: Yüzdeler .

Komut dosyası içermeyen çözüm

Yüzde sınırlarınızı bir sarmalayıcı öğe ile simüle edebilirsiniz; burada:

1. sarmalayıcı öğelerini background-coloristediğiniz kenarlık rengine ayarlayın
2. sarmalayıcı öğelerini paddingyüzde olarak ayarla (çünkü destekleniyorlar)
3. öğelerinizi background-colorbeyaza ayarlayın (veya olması gerekeni)

Bu bir şekilde yüzde sınırlarınızı simüle eder. Bu tekniği kullanan % 25 genişlikte yan kenarlıklara sahip bir öğe örneğini burada bulabilirsiniz .

Örnekte kullanılan 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>

Sorun: Öğenize bazı karmaşık arka plan uygulanmışsa, bunun çok daha karmaşık olacağının farkında olmalısınız ... Özellikle bu arka plan, üst DOM hiyerarşisinden miras alınmışsa. Ancak kullanıcı arayüzünüz yeterince basitse, bu şekilde yapabilirsiniz.

Komut dosyalı çözüm

@BoltClock , eleman boyutuna göre sınır genişliğini programla hesaplayabileceğiniz betikli çözümden bahsetti .

Bu, jQuery kullanan son derece basit bir betik içeren böyle bir örnektir .

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>

Ancak , konteyner boyutunuz her değiştiğinde (yani tarayıcı penceresinin yeniden boyutlandırılması) sınır genişliğini ayarlamanız gerekeceğinin farkında olmalısınız . Sarıcı öğesiyle ilgili ilk geçici çözümüm çok daha basit görünüyor çünkü bu durumlarda genişliği otomatik olarak ayarlayacak.

Komut dosyası içeren çözümün olumlu yanı, komut dosyası içermeyen önceki çözümümde bahsedilen arka plan sorunlarından muzdarip olmamasıdır.

Ayrıca kullanabilirsin

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

VEYA

border: 9vw solid #F5E5D6;

Yani bu daha eski bir soru, ancak hala bir cevap arayanlar için CSS özelliği Box-Sizing burada paha biçilemez:

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

Bu, Div'in genişliğini bir yüzdeye ayarlayabileceğiniz ve div'e eklediğiniz herhangi bir kenarlığın bu yüzdeye dahil edileceği anlamına gelir. Dolayısıyla, örneğin, aşağıdaki div genişliğinin içine 1 piksellik kenarlık ekler:

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

Daha fazla bilgi isterseniz: http://css-tricks.com/box-sizing/

Yüzde değerleri, border-widthCSS'de geçerli değildir . Bu, spesifikasyonda listelenmiştir .

Öğenin genişliğinin yüzdesini veya ihtiyacınız olan uzunluk miktarını hesaplamak için JavaScript kullanmanız ve sonucu pxöğenin kenarlıklarına veya kenarlıklarına benzer şekilde uygulamanız gerekecektir .

Yüzde olarak piksel yerine em kullanabilirsiniz,

Misal:

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

Modern tarayıcılar , pencere görünüm alanının bir yüzdesi olan vh ve vw birimlerini destekler .

Böylece, pencere boyutunun yüzdesi olarak saf CSS kenarlıklarına sahip olabilirsiniz:

border: 5vw solid red;

Bu örneği deneyin ve pencere genişliğini değiştirin; pencere boyutu değiştikçe kenarlık kalınlığı da değişecektir. box-sizing: border-box;da faydalı olabilir.

Kutu Boyutlandırma
, kutu boyutlandırmasını kenarlık kutusu olarak box-sizing: border-box;ayarlayın ve genişliği% 100'e ve kenarlık için sabit bir genişliğe ayarlayın, ardından bir minimum genişlik ekleyin, böylece küçük bir ekran için kenarlık tüm ekranı geçmez

Bir aralık kullanarak özel bir sınır oluşturabilirsiniz. Bir sınıf (sınırın gittiği yönü belirterek) ve bir id ile bir aralık oluşturun:

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

Ardından, CSS'ye gidin ve sınıfı position:absolute, height:100%(Dikey Kenarlıklar İçin), width:100%(Yatay Kenarlıklar İçin) margin:0%ve background-color:#000000;. Gerekli olan her şeyi ekleyin:

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

Sonra karşılık bu kimliği ayarlamak class="VerticalBorder"için top:0%;, left:0%;, width:1%;mdiv genişliği% 100 mheader genişliğine eşit olduğundan (genişlik bunu ayarlamak ne% 100 olacaktır. Eğer% 1'e genişliğini ayarlarsanız kenarlık, pencere genişliğinin% 1'i olacaktır). İd ayarlama tekabül class="HorizontalBorder"için top:99%(üst bu başlığına göre olan konumu belirtir bir başlık kap içinde olduğu için. Eğer alt ulaşmak için isteyen bu + yükseklik% 100 kadar olmalıdır), left:0%;ve height:1%(Mdiv yüksekliği, mheader yüksekliğinden [100% = 100, 20% = 20, 100/20 = 5] 5 kat daha büyük olduğundan, yükseklik, ayarladığınız değerin% 20'si olacaktır. Yüksekliği ayarlarsanız % 1'e kadar, kenarlık pencere yüksekliğinin% 0,2'si olacaktır). İşte nasıl görüneceği:

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

SORUMLULUK REDDİ: Pencereyi yeterince küçük bir boyuta getirirseniz, kenarlıklar kaybolur. Bir çözüm, pencere belirli bir noktaya yeniden boyutlandırılırsa, kenarlığın boyutunu sınırlamak olacaktır. İşte yaptığım şey:

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

Her şeyi doğru yaptıysanız, bu bağlantıdaki gibi görünmelidir: https://jsfiddle.net/umhgkvq8/12/ Garip bir nedenden ötürü, kenarlık jsfiddle'da kaybolacak, ancak bir tarayıcıya başlattığınızda değil .

Calc () özelliğine bir göz atın . İşte bir kullanım örneği:

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