Я решил эту проблему, поместив OnAuthStateChanged в готовый документ, поскольку слушатель загружается слишком медленно.
$(document).ready(function(){
firebase.auth().onAuthStateChanged(user => {
if(user) {
window.location = '/home';
}
});
});
Можно обмануть использующие Поддельные Столбцы, Или можно использовать некоторый обман CSS
Это - простое использование таблицы:
<html>
<head><title>100% Height test</title></head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody><tr><td>Nav area</td></tr></tbody>
</table>
<div style="border: 1px solid green;">Content blabla...
text<br />
text<br />
text<br />
text<br />
</div>
</body>
</html>
Когда DIV был представлен, люди так боялись таблиц, что плохой DIV стал метафорическим молотком.
Использовать абсолютное положение. Обратите внимание, что это не то, как мы обычно используем абсолютное положение, которое требует ручной компоновки или наличия плавающих диалогов. Это будет автоматически растягиваться при изменении размера окна или содержимого. Я считаю, что для этого требуется стандартный режим, но он будет работать в IE6 и выше.
Просто замените div на id 'thecontent' с вашим содержимым (указанная высота приведена только для иллюстрации, вам не нужно указывать высоту фактического содержимого.
<div style="position: relative; width: 100%;">
<div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
<div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
<div style="height: 10000px;" id="thecontent"></div>
</div>
</div>
Это работает так, что Внешний div действует как ориентир для панели навигации. Внешний div растягивается содержимым div 'content'. Панель навигации использует абсолютное позиционирование, чтобы растянуться до высоты своего родителя. Для горизонтального выравнивания мы сделайте сам контент div смещенным на ту же ширину, что и панель навигации.
Это значительно упрощается с помощью модели гибкого бокса CSS3, но она пока недоступна в IE и имеет некоторые свои особенности.