Отделение CSS расширяет 100%-ю высоту страницы

Я решил эту проблему, поместив OnAuthStateChanged в готовый документ, поскольку слушатель загружается слишком медленно.

$(document).ready(function(){
   firebase.auth().onAuthStateChanged(user => {
    if(user) {      
        window.location = '/home';
    }

  });

});
180
задан Tom 2 April 2009 в 18:50
поделиться

3 ответа

Можно обмануть использующие Поддельные Столбцы, Или можно использовать некоторый обман CSS

13
ответ дан Ryan Doherty 23 November 2019 в 06:14
поделиться

Это - простое использование таблицы:

<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 стал метафорическим молотком.

8
ответ дан Aaron Digulla 23 November 2019 в 06:14
поделиться

Использовать абсолютное положение. Обратите внимание, что это не то, как мы обычно используем абсолютное положение, которое требует ручной компоновки или наличия плавающих диалогов. Это будет автоматически растягиваться при изменении размера окна или содержимого. Я считаю, что для этого требуется стандартный режим, но он будет работать в 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 и имеет некоторые свои особенности.

7
ответ дан 23 November 2019 в 06:14
поделиться
Другие вопросы по тегам:

Похожие вопросы: