HTML, высота тела 100% не работает

Итак, у меня есть мобильное приложение с Кордомой и AngularJS. Для стиля я использую Меньше и Bootstrap.

Проблема

В мобильном приложении я попытался размер моих divs с процентом (%). Но это, похоже, не работает. Кажется, я не могу изменить следующее поведение: The divs are as big as the content inside of them. Эта проблема звучит довольно просто, и я попробовал много вариантов здесь (stackoverflow), а также в Интернете. Тем не менее я не нашел решения, чтобы исправить это, и это становится довольно раздражающим.

Я пробовал

Добавление html, body { height: 100% },

Добавление html, body, #canvas { height: 100%}

Добавление #canvas { min-height: 100% }

Добавление html { height: 100% } body { min-height: 100% }

И много других вариаций. Использование px работает, но я не знаю, насколько велико мое мобильное устройство, так что это не очень удобно.. (Я также использую bootstrap и некоторые медиа-запросы для стилизации).

Пример

Когда я добавляю элементы в свой div, я получаю следующее поведение:

Я хочу удалить это пустое пустое пространство, но я могу добиться этого только при использовании px вместо %.

Меньший пример:

html, body {
    background: transparent;
    height: 100%;
    margin: 0;
    padding: 0;    
}

#canvas {
    min-height: 100%;
}

body {
    -webkit-touch-callout: none;                 //prevent callout to copy image, etc when tap to hold 
    -webkit-text-size-adjust: none;              //prevent webkit from resizing text to fit 
    -webkit-user-select: node;                   //prevent copy paste, to allow, change 'none' to 'text'  
    min-height: 100%;
    margin: 0;
    padding: 0; 
    background-color: @cgiColor;  
}

.header {
    top: 0px;
    width: 100%;
    height: 5%;
    background: @companyColor;
    color: @textColor;
}

.incidentContainer {
    background: @appBodyColor;
    width: 100%;
    height: 70%;
}

.footer {
    position: absolute;
    color: @textColor;
    bottom: 0px;
    height: 15%;
    width: 100%;    
    background: @companyColor;
}

Дополнительная информация

Я использую AngularJS, поэтому мое приложение представляет собой одностраничное приложение. Мой index.html выглядит следующим образом:

<body oncontextmenu="return false" >  
   <div class="{{ pageClass}}"  ng-view ></div>        
   <script type="text/javascript" src="cordova.js"></script>
   <script data-main="main" src="lib/require.js"></script>
</body>

Конечно, стандартные ссылки на мои листы CSS и т.д. Все остальные страницы включены в " ng-view" и не имеют тегов или . Это потому, что они включены.

Решение

Решение заключалось в том, чтобы добавить следующее правило CSS:

div[ng-view]{
     height: 100%;
}

Это сработало, потому что все div (кроме html и body) являются дочерними элементами этого элемента. Добавление 100% сделало пробел div равным 100% экрана и, таким образом, предоставило пространство для процентной работы.

Кредиты отправляются в Jai для ответа!

Ответ 1

Как мне кажется, директива ng-view является родителем вашего приложения и header, content, footer загружается в этот div. Таким образом, у вас есть ваш header div в правильном месте, нижний колонтитул также размещен правильно, поскольку он абсолютно позиционируется.

Но в случае вашей области содержимого, то есть относительно div ng-view.

Я бы рекомендовал вам сделать высоту 100%. Что-то вроде:

div[ng-view]{
     height: 100%;
}

Ответ 2

Вы пытались добавить следующий css и установить важный атрибут

html, body { height: 100% !important }

Ответ 3

Это, скорее всего, связано с тем, что в CSS 100% является относительным значением.

С шириной по умолчанию 100% - это ширина экрана или все, что вы ищете.

Высота, однако, не занимает высоту экрана как 100%. Он нуждается в солидной ценности.

Я думаю, что если вы измените

html, body {
    background: transparent;
    height: 100%;
    margin: 0;
    padding: 0;    
}

с

html, body {
    background: transparent;
    height: 100vh;
    margin: 0;
    padding: 0;    
}

он должен работать.

100vh должен установить высоту html в высоту окна просмотра.

Я предполагаю, что этот способ работает, я должен сказать, что я сам не использовал что-то, чтобы моя страница имела высоту, которая составляет 100% экрана.

Ответ 4

Yay, отображаемый HTML!

class="incident" расширяется настолько, насколько это необходимо. Я считаю, что ваше исправление должно состоять в том, чтобы этот элемент имел высоту 70% (потому что он будет относиться к всей странице), а затем инцидент. Контейнер должен иметь высоту 100%.

Процентные высоты относятся к родительскому элементу, а не к корню, поэтому вам нужно быть в курсе любых контейнеров, даже незаметно добавленных каркасом.

Кроме того, если это помогает, Йельмергу предложил тип единицы vh. Это может поместиться в ваш прецедент - одна "Высота просмотра" эквивалентна "1% области содержимого браузера". Таким образом, 100vh займет весь экран. Это справедливо даже для детей глубокого уровня.