Як встановити товщину межі у відсотках?

Як встановити ширину межі елемента у відсотках? Я спробував синтаксис

border-width:10%;

Але це не працює.

Причиною, яку я хочу встановити border-widthу відсотках, є те, що у мене є елемент із width: 80%;і height: 80%;, і я хочу, щоб елемент охоплював усе вікно браузера, тому я хочу встановити всі межі 10%. Я не роблю цього за допомогою методу двох елементів, при якому один буде розташовуватися позаду іншого і діятиме як межа, оскільки фон елемента прозорий, і розташування елемента за ним вплине на його прозорість.

Я знаю, що це можна зробити за допомогою JavaScript, але я шукаю метод лише CSS, якщо це можливо.

Кордон не підтримує відсоток ... але це все одно можливо ...

Як інші вказували на специфікацію CSS , відсотки не підтримуються на межах:

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

Як бачите, там написано " Відсотки": Не застосовується .

Рішення без сценарію

Ви можете змоделювати відсотки меж за допомогою елемента-обгортки, де:

1. встановіть елементи обгортки background-colorна бажаний колір межі
2. встановити елементи обгортки paddingу відсотках (оскільки вони підтримуються)
3. встановіть для своїх елементів background-colorбілий (або що завгодно це потрібно)

Це якимось чином змоделює ваші відсотки. Ось приклад елемента з бічними межами шириною 25%, який використовує цю техніку.

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>

Проблема: Ви повинні пам’ятати, що це буде набагато складніше, коли до вашого елемента застосовується складний фон ... Особливо, якщо цей фон успадковується від ієрархії DOM-предка. Але якщо ваш інтерфейс досить простий, ви можете зробити це таким чином.

Рішення за сценарієм

@BoltClock згадав сценарій, де ви можете програмно обчислити ширину меж відповідно до розміру елемента.

Це такий приклад з надзвичайно простим сценарієм, що використовує jQuery.

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>

Але ви повинні знати, що вам доведеться регулювати ширину меж кожного разу, коли змінюється розмір вашого контейнера (тобто зміна розміру вікна браузера). Моє перше обхідне рішення з елементом обгортки здається набагато простішим, оскільки воно автоматично регулює ширину в цих ситуаціях.

Позитивною стороною сценарійного рішення є те, що воно не страждає від фонових проблем, згаданих у моєму попередньому некриптовому рішенні.

Ви також можете використовувати

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

АБО

border: 9vw solid #F5E5D6;

Отже, це давнє запитання, але для тих, хто все ще шукає відповіді, властивість CSS Box-Sizing тут безцінне:

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

Це означає, що ви можете встановити ширину Div у відсотках, і будь-яка межа, яку ви додасте до div, буде включена в цей відсоток. Так, наприклад, наступне додасть межу 1px до внутрішньої частини ширини div:

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

Якщо вам потрібна додаткова інформація: http://css-tricks.com/box-sizing/

Значення відсотків не застосовуються до border-widthCSS. Це вказано в специфікації .

Вам потрібно буде використовувати JavaScript для обчислення відсоткового співвідношення ширини елемента або будь-якої кількості довжини, яка вам потрібна, і застосувати результат до pxабо подібного до меж елемента.

Ви можете використовувати em для відсотків замість пікселів,

Приклад:

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

Сучасні браузери підтримують модулі vh та vw , які становлять відсоток від області перегляду вікна.

Отже, ви можете мати чисті межі CSS як відсоток від розміру вікна:

border: 5vw solid red;

Спробуйте цей приклад і змініть ширину вікна; межа буде змінювати товщину, коли вікно змінює розмір. box-sizing: border-box;також може бути корисним.

Розмір
вікна встановіть розмір вікна на поле межі box-sizing: border-box;та встановіть ширину на 100% та фіксовану ширину межі, а потім додайте мінімальну ширину, щоб на маленькому екрані межа не перегнала весь екран

Ви можете зробити власну межу за допомогою прольоту. Зробіть проміжок з класом (вказуючи напрямок, в якому рухається межа) та ідентифікатором:

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

Потім перейдіть до вас CSS і встановити клас до position:absolute, height:100%(для вертикальних кордонів), width:100%(для горизонтальних кордонів), margin:0%і background-color:#000000;. Додайте все, що потрібно:

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

Потім встановити ідентифікатор , який відповідає class="VerticalBorder"до top:0%;, left:0%;, width:1%;(Так як ширина mdiv дорівнює ширині mheader на 100%, то ширина буде 100% того , що ви встановите його. Якщо ви встановите ширину на 1% , то межа складатиме 1% від ширини вікна). Встановіть ідентифікатор , який відповідає class="HorizontalBorder"до top:99%(Оскільки це в контейнері заголовка у верхній відноситься до позиції , яку він знаходиться у відповідності з заголовком. Це + висота повинна становити 100% , якщо ви хочете, щоб досягти дна), left:0%;і height:1%(Оскільки висота mdiv у 5 разів перевищує висоту mheader [100% = 100, 20% = 20, 100/20 = 5], висота становитиме 20% від того, що ви встановили. Якщо ви встановите висоту до 1% межа буде складати .2% від висоти вікна). Ось як це буде виглядати:

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

ЗАМОВЛЕННЯ: Якщо змінити розмір вікна до досить малого розміру, межі зникнуть. Рішенням буде обмеження розміру межі, якщо розмір вікна буде змінено до певної точки. Ось що я зробив:

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

Якщо ви все зробили правильно, це повинно виглядати так, як це є за цим посиланням: https://jsfiddle.net/umhgkvq8/12/ З якоїсь дивної причини межа в jsfiddle зникне, але ні, якщо ви запустите її у браузері .

Погляньте на специфікацію calc () . Ось приклад використання:

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