Я пытаюсь изменить высоту нижнего колонтитула, используя ниже css. Если я задаю высоту с помощью пикселей, она изменит размер на правильное количество пикселей (например, height: 100px;). Установка процентного значения, как показано ниже, не работает. Я просто хочу, чтобы нижний колонтитул составлял процентную высоту всей высоты экрана, чтобы обеспечить различную высоту экрана. Есть ли способ сделать это?Невозможно установить высоту в процентах

Вот код, я использую::

.ui-page .ui-footer .ui-navbar a { 
    height : 60%; 
} 

     <div data-role="footer" data-position="fixed"> 
      <div data-role="navbar"> 
       <ul> 
        <li><a href="/view" data-role="tab" data-icon="grid">View</a></li> 
        <li><a href="/add" data-role="tab" data-icon="grid" 
         class="ui-btn-active">Add</a></li> 
        <li><a href="/edit" data-role="tab" data-icon="grid">Edit</a></li> 
       </ul> 
      </div> 
     </div>

2012-04-19 blue-sky

вы можете показать свой HTML? –

Процент высоты работает только в том случае, если родительский элемент имеет заданную высоту. – devstruck

@tim peterson HTML помещен в вопрос –

Вот конкретный ответ JQuery Mobile для тебя.

Если вы хотите изменить высоту нижнего колонтитула, то я предлагаю нацеливание колонтитула с вашей CSS, а не адресованной descentant элемента колонтитула:

.ui-mobile .ui-page .ui-footer { 
    height : 30%; 
}

Вот демо: http://jsfiddle.net/csKtX/1/ (убедитесь, чтобы увидеть обновление ниже)

.ui-mobile применяется к элементу HTML, когда JQuery Мобильный инициализирует.
.ui-page применяется к любой инициализированной псевдостранице.
.ui-footer применяется к любому инициализированную сноске

Update

я вставил код колонтитула в мой JSFiddle и нашел выход, что navbar виджет не берет высоту из его контейнера (скорее всего, ваш первоначальный вопрос в любом случае ...). Вот исправление для JQuery Mobile 1.1.0:

.ui-mobile .ui-page .ui-footer > div,/*navbar container*/ 
.ui-mobile .ui-page .ui-footer ul,/*list-item container*/ 
.ui-mobile .ui-page .ui-footer ul li,/*list-items*/ 
.ui-mobile .ui-page .ui-footer ul li a/*individual buttons*/ { 
    height : 100%; 
}

Это относится 100% высота для всех необходимых элементов в сноске, так что все элементы-потомки бери на все полезное пространство возможно.

И новый демо: http://jsfiddle.net/csKtX/2/

источник

2012-04-19 21:37:20 Jasper

Вы должны сначала установить

html, body { 
    height: 100%; 
}

Это позволит вам устанавливать процентные высоты на каких-либо элементов, которые являются прямыми потомками body ,

http://jsfiddle.net/mblase75/w7mMZ/

источник

2012-04-19 21:26:09 Blazemonger

для большей ясности: http://jsfiddle.net/w7mMZ/7/ –

Добавить дисплей: блок свойства, может быть, это может помочь вам

источник

2012-04-19 21:28:31 luchopintado

Возможно ли, что он не будет работать на якорной элементе <a>, , потому что кажется, что вы цитируете, что , мой совет должен был сделать <div> и установить его на правильную высоту.

Я надеюсь, что это помогло ..

источник

2012-04-19 21:28:35 RoXaS

Невозможно установить высоту в процентах

ответ

Update

Смежные вопросы