Поместите границу на 100% высоты и ширины - справа и снизу снаружи - PullRequest
Новая
       27

Поместите границу на 100% высоты и ширины - справа и снизу снаружи

0 голосов
/ 28 декабря 2018

Я использую Firefox и хочу создать div с высотой и шириной 100% и белой рамкой с 10px.Правая и нижняя части границы кажутся за пределами div и тела.

https://jsfiddle.net/tob6g805/

html {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  background-color: #ffb0a3;
  overflow: hidden;
}

.div-with-border {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  border: 10px;
  border-color: #ffffff;
  border-style: solid;
}

Обходной путь должен был добавить границу справа и снизу и уменьшить ширину и высотуdiv ... но это становится особенно проблематичным при изменении размера страницы.

https://jsfiddle.net/1wtjkybm/

html {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  background-color: #ffb0a3;
  overflow: hidden;
}

.div-with-border {
  width: 95%;
  height: 95%;
  margin: 0px;
  padding: 0px;
  border: 10px;
  border-bottom: 100px;
  border-right: 100px;
  border-color: #ffffff;
  border-style: solid;
}

Спасибо за любую помощь.

Ответы [ 2 ]

0 голосов
/ 28 декабря 2018

Вот одно решение, использующее flexbox 

body,
html {
    height: 100%;
    width: 100%;
}

body,
html,
html * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

  body {
        height: 100%;
        width: 100%;
        background-color: #ffb0a3;
        display: flex;
        justify-content: center;
        align-items: center;
  }

  .div-with-border {

    width: 90%;
    height: 90%;
    border: 10px;
    border-color: #ffffff;
    border-style: solid;
    text-align:center;
    font-size:7vw;
    font-family:Open Sans;
    font-weight:bold;
    color:#d46a58;
  }

Также всегда делайте: 

   <meta name="viewport" content="width=device-width,initial-scale=1.0">

в теге <head>.

0 голосов
/ 28 декабря 2018

По умолчанию в блочной модели CSS ширина и высота, назначаемые элементу, применяются только к блоку содержимого элемента.Если элемент имеет какие-либо рамки или отступы, он добавляется к ширине и высоте, чтобы получить размер поля, отображаемого на экране.Это означает, что когда вы устанавливаете ширину и высоту, вы должны отрегулировать значение, которое вы даете, чтобы учесть любые границы или отступы, которые могут быть добавлены.

Источник: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Есть свойство CSS под названием box-sizing, которое позволяет вам настроить это свойство.Добавление box-sizing: border-box к .div-with-border должно исправить это для вас!

Взгляните на ссылку выше.У них есть живой пример, который демонстрирует box-sizing.

...