Проблем с оформлението на jQuery UI и разделите на jQuery UI

Опитвам се да създам оформление, структурирано по следния начин:

  • северно стъкло
  • center pane
    • a header div
    • a notebook-like tab panel
      • with at least one tab
    • долен колонтитул div

div на горния и долния колонтитул трябва винаги да се виждат, разделът трябва да заема цялото оставащо пространство и трябва да има вертикална лента за превъртане, ако е необходимо.

Ето какво направих: https://jsfiddle.net/mguijarr/y57v3nkf/

Зададох overflow:hidden в централния панел, опитах се да задам height: 100% в панела с раздели, за да расте колкото може повече, но изяжда пространството отдолу (т.е. div в долния колонтитул не се показва).

Какво мога да направя, за да коригирам оформлението?


html jquery css jquery-ui jquery-ui-layout
person mguijarr    schedule 02.04.2015    source източник

Отговори (2)


arrow_upward
1
arrow_downward

Долният колонтитул е там. Проблемът е просто, че не можете да зададете div#tabs с височина: 100%, защото външният div има overflow:hidden

Той ще има същата височина като контейнера си, но тъй като долният колонтитул е на същото ниво като div#tabs, той ще бъде скрит, защото div.ui-layout-center има overflow:hidden.

Първо решение: променете височината на div#tabs на по-нисък процент:

   <div style="margin-bottom: 10px; height: 100px; background: #ffff00;"></div>
   <div id="tabs" style="height: 40%; overflow: auto">
        content
   </div>
   <div style="background: #ff0000; height: 100px; ">footer</div>

https://jsfiddle.net/y57v3nkf/1/

Второ решение, променете опцията за препълване на външния div на автоматична: https://jsfiddle.net/y57v3nkf/2/

Трето решение (Jquery Brute force): Задайте външния div на 100% височина и:

$(document).ready(function(){
   var outerDivHeight = $('div.ui-layout-center').height();
   var tabDivHeight = outerDivHeight - 100 - 100 -10;

   $('#tabs').height(tabDivHeight);
});

https://jsfiddle.net/y57v3nkf/3/

Проблеми с това решение:

  • Трябва да направите изчисления.
  • Той получава правилната височина при зареждане на страницата, но след това не го прави, ако страницата е преоразмерена.

СЪВЕТ: Преминете към процентно: Тези оформления стават наистина трудни, когато имате div с фиксиран размер заедно с div в проценти. За да станете напълно отзивчиви, ще трябва да преработите цялото оформление в проценти, например:

|-------------100%-----------------|
|---20%----|------------80%--------|
|....|.....|.....|.................|
person Mauricio Moraes    schedule 02.04.2015
comment
Благодаря за помощта. решение 2 не е това, за което се грижа, тъй като добавя вертикална лента за превъртане в div.ui-layout-center, което не искам. така че има решение 1... но бих искал разделите div да запълнят цялото налично пространство за текущата височина има ли начин да го направя? - person mguijarr; 02.04.2015
comment
Може би с малко jquery? Вижте трети вариант. Също така се борих много с тези проблеми: фиксиран размер div рамо до рамо с процентен div. В крайна сметка винаги преструктурирах цялото оформление с всички процентни divs. Днес просто включвам малко lib с мрежова система, като bootstrap, и това ми върши работа. Вижте дали работи за вас. - person Mauricio Moraes; 02.04.2015

arrow_upward
0
arrow_downward

Отговарям на собствения си въпрос: всъщност опцията contentSelector на оформлението на jQuery свърши работа.

Вижте актуализирана цигулка: http://jsfiddle.net/mguijarr/288yaz15/1/

person mguijarr    schedule 04.04.2015