Как заставить элемент всегда занимать определенный процент его родительского элемента, даже если размер браузера изменен?

Question

Примечание: я знаю, что elem {height: 90%} существует.

Что мне нужно:

• элемент, занимающий x% ширины и y% высотыего родительский элемент, независимо от размера
• у родителя есть поля и отступы

Моя проблема:

• сначала это выглядит отлично, но когда я делаюокно браузера меньше, контент начинает выливаться из нижней части родительского. Это очень удручающе. Мне кажется, что размер #load div составляет 90% от его родительского элемента (согласно запросу; см. Таблицу стилей ниже) ;к сожалению, эти 90% не учитывают поля или отступы. Что здесь происходит? Если ответ только на то, что проценты не работают "так" при наличии полей / отступов, как мне указать, что элемент занимает х процентов своего родителяпосле вычета полей / отступов? Также обратите внимание, что jQueryui использует css, к которому я бы хотел прикасаться, если это возможно.

Моя разметка:

<div id="tabscontainer">
      <div id="tabs">
        <ul>
            <li><a href="#create">Create</a></li>
            <li><a href="#load">Load</a></li>
        </ul>
 <div id="create">
something or other
 </div>
 <div id="load">
... there is a lot of content here ...
 </div>
</div>

<script>

$(document).ready(function() {$("#tabs").tabs();});

</script>

Мой стиль:

html, body {
    height: 100%;
}

#tabscontainer {
    height: 95%;
}

#tabs {
    height: 100%;
}

#tabs > div {
    height: 90%;
    overflow: auto;
}

Также действует стиль вкладок по умолчанию в jQuery (без изменений от меня).

Answer 1

Мне кажется, проблема в том, что стили из пользовательского интерфейса jQuery в PX, а остальные в%. Обычно вы сталкиваетесь с проблемами, когда комбинируете это. Попробуйте установить поля, отступы и границы в% (я знаю, что вы не хотите связываться с jQuery CSS, но вы можете переопределить его с! Важным или аналогичным).

Answer 2

Я считаю, что, когда height не сокращает его, наложение position:relative; на родителя и position:absolute; на ребенка окажется более надежным.Тогда конечно top:5%; right:5%; bottom:5%; left:5%;.Это должно игнорировать заполнение.

Не уверен, что это будет работать с вашими существующими стилями.