У меня была такая же проблема, но я не мог решить проблему с помощью flexbox выше. Поэтому я создал свой собственный шаблон, который включает в себя:
Я использовал flexboxes, но более простым способом, используя только отображение свойств: flex и flex-direction: row | column:
Я использую угловые и хочу, чтобы размеры моего компонента составляли 100% от их родительского элемента.
Ключ должен установить размер (в процентах) для всех родителей, чтобы ограничить их размер , В следующем примере высота myapp имеет 100% окна просмотра.
Основной компонент имеет 90% окна просмотра, потому что верхний и нижний колонтитулы имеют 5%.
Я разместил здесь свой шаблон : https://jsfiddle.net/abreneliere/mrjh6y2e/3
body{
margin: 0;
color: white;
height: 100%;
}
div#myapp
{
display: flex;
flex-direction: column;
background-color: red; /* <-- painful color for your eyes ! */
height: 100%; /* <-- if you remove this line, myapp has no limited height */
}
div#main /* parent div for sidebar and content */
{
display: flex;
width: 100%;
height: 90%;
}
div#header {
background-color: #333;
height: 5%;
}
div#footer {
background-color: #222;
height: 5%;
}
div#sidebar {
background-color: #666;
width: 20%;
overflow-y: auto;
}
div#content {
background-color: #888;
width: 80%;
overflow-y: auto;
}
div.fized_size_element {
background-color: #AAA;
display: block;
width: 100px;
height: 50px;
margin: 5px;
}
Html:
HEADER
CONTENT
Используете ли вы тег привязки для реализации «кнопки», которая открывает диалоговое окно? Если это так, вам нужно, чтобы обработчик кликов, открывающий диалоговое окно, возвращал false, чтобы не вызывалось действие по умолчанию тега привязки. Если вы используете кнопку, вам также необходимо убедиться, что она не отправляется (путем возврата false из обработчика) и полностью обновляет страницу.
Например,
$('a.closeButton').click( function() {
$('#dialog').dialog('open');
return false;
});
<a class='closeButton'>Close</a>
измените свой код следующим образом
$('a.closeButton').click( function(e) {
e.preventDefault();
$('#dialog').dialog('open');
});