Исключить размеры полосы прокрутки из процентов? - PullRequest
Новая
       29

Исключить размеры полосы прокрутки из процентов?

0 голосов
/ 28 декабря 2011
  1. Дано:
    • элементы parent, child1, child2
    • child2 имеет height и overflow, так что его содержимое отображается с вертикальной полосой прокрутки
    • child1 и child2 каждый имеет дочерние элементы с width, установленным в процентах

Похоже, что 100% ширины child2 не включает вертикальную полосу прокрутки (тестирование в Chrome, хотя в идеале я хочу кросс-браузерное решение). Другими словами:

TL; DR

Если только один из parent.child1 и parent.child2 имеет вертикальную полосу прокрутки, то дочерний элемент child1 имеет вычисленную ширину, отличную от дочернего элемента child2.

Как я могу расположить parent, child1, child2 и любые дочерние элементы child1 и child2, чтобы ширина, вычисленная с использованием процентов child1 и child2, была одинаковой ??

Решения могут использовать приемы с абсолютным позиционированием фоновых слоев и т. Д., А также «современный» (т. Е. Не так широко поддерживается) HTML5 / CSS3.

Пожалуйста и спасибо!

1 Ответ

0 голосов
/ 28 декабря 2011

Мне кажется, что вам нужно «сложить в мешки» детей, чтобы они работали согласованно, как вам хотелось бы, применяя процент width s к внешнему слою и height / overflowна внутренний слой. 

<div id="wrap">
   <div id="child-1" class="outer">
      <div class="inner">
         <!--- HTML goes here -->
      </div>
    </div>
   <div id="child-2" class="outer">
      <div class="inner">
         <!--- HTML goes here -->
      </div>
   </div>
</div>

#child-1 { width:60%; }
   #child-1 .inner { height:100px; overflow:auto; }
#child-2 { width:40%; }
...