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

#html #css #internet-explorer-8 #ie8-compatibility-mode

#HTML #css #internet-explorer-8 #ie8-режим совместимости

Вопрос:

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

По причинам, я не могу изменить содержимое или стиль любого из divs. Однако я могу обернуть внутренний div в другие divs, если это необходимо. Это не делается с помощью 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>

1. Если родительский элемент имеет переполнение в одну сторону, и вы хотите, чтобы у дочернего элемента оно было другим, вы должны указать его на дочернем элементе.

2. Но я не хочу, чтобы внутреннее дочернее содержимое переполнялось внешним. Внутренний div должен заполнять 100% высоты и ширины доступного пространства во внешнем div.

3. @AllDani Я включил скрипку в вопрос, но вот один непосредственно на сайте: jsfiddle.net/yetszjr5 .

4. Я не вижу ссылки jsfiddle в вопросе

5. @AllDani Извините, я имел в виду, что включил в вопрос фрагмент кода. Я думал, что это то, что мы используем вместо jsfiddle сейчас. Мой плохой.

Ответ №1:

Вы можете использовать свойство 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.

Ответ №2:

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
}

1. но я думаю, что это не сработает, если ширина границы превышает 1 пиксель. в соответствии с OP ширина границы может меняться.

2. Да, вы правы! Но это, по крайней мере, указывает на то, почему он отключается из-за переполнения: скрыто, поскольку @IMTheNachoMan не может понять это