100% высота для div внутри другого div с полями

У меня есть div внутри div. CSS/HTML ниже. Я пытаюсь понять, как заставить внутренний div иметь истинный height: 100%; без переполнения, а что нет. Независимо от того, что я пытаюсь сделать, граница внутреннего div обрезается из-за внешнего div overflow: hidden.

По причинам, по которым я не могу изменить содержимое или стиль любого из разделов. Однако я могу обернуть внутренний div в другие div, если это необходимо. Это не делается с помощью JavaScript, поэтому я не могу изменять внешние или внутренние элементы div.

Кроме того, это должно работать в IE8.

Внешний стиль div не сильно изменится — только ширина, высота, цвет фона и поля.

Внутренний div может быть любым. У него может быть граница побольше, у него может не быть границы, это может быть черт знает что.

#outer
{
	width: 200px;
	height: 200px;
	background-color: yellow;
	margin: 20px;
	overflow: hidden;
	position: absolute;
}

#wrapper
{
  height: 100%;
}

#inner
{
	border: 1px solid red;
	height: 100%;
}
<div id="outer">
	<div id="wrapper">
		<div id="inner">
			a
		</div>
	</div>
</div>


html css internet-explorer-8 ie8-compatibility-mode
person IMTheNachoMan    schedule 07.10.2016    source источник
comment
Если у родителя есть переполнение в одну сторону, а вы хотите, чтобы у дочернего было другое, вы должны указать его для дочернего.   -  person Daniel Springer    schedule 07.10.2016
comment
Но я не хочу, чтобы содержимое внутреннего дочернего элемента переполняло внешнее. Внутренний div должен заполнять 100% высоты и ширины доступного пространства внутри внешнего div.   -  person IMTheNachoMan    schedule 07.10.2016
comment
@AllDani Я включил скрипку в вопрос, но вот одна из них прямо на сайте: jsfiddle.net/yetszjr5 .   -  person IMTheNachoMan    schedule 07.10.2016
comment
Я не вижу ссылку jsfiddle в вопросе   -  person Daniel Springer    schedule 07.10.2016
comment
@AllDani Извините, я имел в виду, что включил фрагмент кода в вопрос. Я думал, что это то, что мы сейчас используем вместо jsfiddle. Виноват.   -  person IMTheNachoMan    schedule 07.10.2016
comment
Как правило, лучше иметь оба. Это тоже бесплатно ;)   -  person Daniel Springer    schedule 07.10.2016
comment
Попробуйте добавить скриншот того, что происходит и что вы хотели бы, чтобы произошло.   -  person Daniel Springer    schedule 07.10.2016
comment
Не уверен, как сделать скриншот того, что я хотел бы сделать, так как я не могу заставить его делать то, что я хочу. В основном у меня есть внешняя коробка некоторого размера с полями. Я хотел бы иметь внутреннее поле с произвольным HTML, но оно должно быть на 100% высотой и шириной этого внешнего поля (конечно, внутри полей). Надеюсь это имеет смысл...   -  person IMTheNachoMan    schedule 07.10.2016
comment
Попробуйте использовать Paint (Windows) или предварительный просмотр (MacOS).   -  person Daniel Springer    schedule 07.10.2016

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете использовать свойство css flex для #wrapper

#wrapper {
    display: flex;
    flex-flow: column;
    height: 100%;
}


#outer
{
	width: 200px;
	height: 200px;
	background-color: yellow;
	margin: 20px;
	overflow: hidden;
	position: absolute;
}

#wrapper /* adding flex */
{
  display: flex;
flex-flow: column;
height: 100%;
}

#inner
{
	border: 1px solid red;
	height: 100%;
}
<div id="outer">
	<div id="wrapper">
		<div id="inner">
			a
		</div>
	</div>
</div>

он будет работать во всех последних браузерах, но не будет работать в IE8.

person Krish    schedule 07.10.2016
comment
Я не могу изменить стиль/код для #inner. Есть ли способ сделать это, изменив #wrapper? - person IMTheNachoMan; 07.10.2016
comment
можно ли так пройтись #wrapper #inner {box-sizing: border-box;} - person Krish; 08.10.2016

arrow_upward
0
arrow_downward

jsfiddle

измените высоту #wrapper только на 99%, чтобы решить проблему.

Причина, по которой внутренняя часть обрезается, потому что:

#inner {
    height: 100%; //this means it equals to 200px
    border: 1px solid red;  //1px at the top border and 1px at the bottom added to the height of the #inner so now it becomes 202px, which will get cut off by overflow:hidden
}
person THCoder    schedule 07.10.2016
comment
но я думаю, что это не сработает, если ширина границы превышает 1 пиксель. в соответствии с OP ширина границы может варьироваться. - person Krish; 07.10.2016
comment
Да, ты прав! Но это, по крайней мере, указывает, почему он обрезается overflow:hidden, поскольку @IMTheNachoMan не может этого понять. - person THCoder; 07.10.2016