Содержащийся элемент переполняет контейнер, несмотря на размер коробки

Я изо всех сил пытаюсь понять, почему у меня есть элемент с высотой: 100%, который больше, чем его контейнер, несмотря на то, что для размера окна установлено значение border-box;

Я сделал здесь скрипку: https://jsfiddle.net/a8v9a8ok/6/

Я установил для элементов высоту 100%, а размер окна — для рамки, но статья, содержащаяся в разделе под названием «left», проходит мимо раздела, и текстовая текстовая область, которую она содержит, также проходит мимо.

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

html {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*, *:before, *:after {
  -moz-box-sizing: inherit;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

Я не просто хочу скрыть переполнение, я хочу, чтобы элементы оставались внутри своего контейнера и заполняли соответствующий контейнер на 100%.

Я уверен, что это легко исправить, но я безрезультатно пытался часами, поэтому любая помощь будет очень признательна!

РЕДАКТИРОВАТЬ: я просто пытаюсь разместить все элементы в соответствующих контейнерах, не перекрывая их по вертикали. Я ожидаю, что установка высоты текстовой области на 100% приведет к тому, что она заполнит оставшееся пространство в своем контейнере.

Спасибо


html css border-box box-sizing
person ministe2003    schedule 21.08.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

У вашего элемента article есть два дочерних элемента: inputelement и textarea, у которого есть height: 100%. Таким образом, высота articles в сумме составляет 100% плюс высота входного элемента. Вот почему он переполняется.

Чтобы исправить это, вы можете указать фиксированную высоту для input , например 40 пикселей, и использовать height: calc( 100% - 60px) ; (вычитает высоту 40 пикселей плюс 2 x 10 пикселей для верхнего и нижнего поля) для этого article.

https://jsfiddle.net/m08tsvzf/1/

person Johannes    schedule 21.08.2017
comment
Спасибо, попробую. Но почему он просто не заполняет доступное пространство после высоты ввода? Это поведение, которое я ожидал - person ministe2003; 21.08.2017
comment
потому что вы дали ему 100% высоты, и эти 100% относятся к родительскому элементу - person Johannes; 21.08.2017
comment
Я понимаю, что он хочет заполнить 100% своего родителя, но я уверен, что делал подобные вещи в прошлом и смог заставить его заполнить остаточную высоту родителя без необходимости явного вычисления Это. Я думаю, пока я не выясню, что я использовал (или что я ошибаюсь!), Я буду использовать этот метод, поэтому я отмечу это правильно. Спасибо - person ministe2003; 22.08.2017

arrow_upward
0
arrow_downward

я не понял твой вопрос. это то, чего ты хочешь??

Снимок

если да, то это изменения в css

main, section, article{
height: 100%;
width: 100%;
margin:5px;
}
textarea{
   height:120%;
   width:1000%;
   max-height:100%;
   max-width:100%;
}


textarea.resize-none {
resize: none; 
 }

main{
background: yellow;
height:100%;
}

#left{
width: 100%;
background: blue;
height: 100%
}

#refresh{
margin-top: -30px;
float:left;
position :relative;
}
person swogat    schedule 21.08.2017
comment
В основном я спрашиваю, почему статья и текстовое поле внутри нее перекрывают раздел, в котором она находится? Ширина левого элемента не имеет значения. Почему ты поплавил кнопку? - person ministe2003; 21.08.2017
comment
Я отредактировал ответ. Проверь это. Нет причин перемещать обновление вправо. Для ограничения размера каждого тега размером родительского тега используйте max-height и max-width. вы можете видеть, что я задал ширину текстовой области 1000 пикселей, но это не влияет на мой вывод, потому что максимальная ширина определена на 100% - person swogat; 21.08.2017