#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.
Комментарии:
1. Я не могу изменить стиль / код для #inner. Есть ли способ сделать это, изменив #wrapper?
2. возможно ли вам пройти так
#wrapper #inner {box-sizing: border-box;}
Ответ №2:
изменение #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 не может понять это