Раскол страница 50/50%, независимо от дальнейшего содержания

Question

Рассмотрим следующий макет страницы:

<div id="container"> 
    <div id="a">A</div> 
    <div id="b">B</div> 
</div> 

который стилизованную так:

html, body { margin: 0px ; height: 100%; } 

#container { 
    height: 100%; 
} 

#container * { 
    box-sizing: border-box; 
    border: 1px solid red; 
} 

#a { height: 50%; } 
#b { height: 50%; } 

Если предположить, что #a и #b не получают дополнительные padding или margin style-attributes, есть ли вероятность того, что любой дополнительный контент внутри этих divs может привести к разрыву 50/50? Или сделать контейнер более 100% процентным правилом и заставлять страницу иметь полосу прокрутки.

Я использую это как макет страницы верхнего уровня, и я хочу удостовериться, что разделение 50/50 всегда соблюдается независимо от какого-либо дополнительного контента в div #a и #b.

https://jsfiddle.net/4v9ag66n/

Answer 1

Чтобы убедиться, что вы можете добавить overflow-y: hidden; к # а, # б дивы.

Answer 2

Вы также можете добавить переполнение-y: прокрутку или переполнение-y: скрыть до #a и #b таким образом, чтобы оба div имели отдельную полосу прокрутки/прокрутки, если контент больше, а страница не будет иметь полосу прокрутки

Answer 3

Я думаю, что это CSS (ваш CSS, что я изменил) должны добиться того, что вы после:

html, body { 
    margin: 0px ; 
    height: 100%; 
    overflow: hidden; 
} 

#container { 
    height: 100%; 
} 

#container * { 
    box-sizing: border-box; 
    border: 1px solid red; 
} 

#a { height: 50%; overflow: auto;} 
#b { height: 50%; overflow: auto;} 

Кроме того, вы можете захотеть взглянуть на перенос слов.