Блог

Главная - Вопросы по программированию - используя JQM, почему дочерний div не переопределяет ширину и высоту от родителей

используя JQM, почему дочерний div не переопределяет ширину и высоту от родителей

#javascript #css #jquery-mobile #google-maps-api-3

#javascript #css #jquery-мобильный #google-maps-api-3

Вопрос:

У меня есть страница JQM, которая содержит карту Google. Страница JQM содержит заголовок и раздел содержимого. Сам раздел содержимого содержит карту Google.

 <div data-url="map-page" data-role="page" id="map-page" data-title="Test">

   <div data-role="header" data-position="fixed">
      <h1>my header</h1>
   </div><!-- /header -->
   <div role="main" id="map-canvas" class="ui-content">          
      <p>some text that doesn't show up after map loads</p>
   </div><!-- /content -->
   <div data-role="panel" data-position-fixed="true" data-display="push" data-theme="b" id="nav-panel">
      <h3>some random text here on this panel</h3>
   </div><!-- /panel -->
</div>

Страница оформлена очень просто:

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

#map-page, #map-canvas {
   width: 100%;
   height: 100%;
   padding: 0px; 
 }

Когда я добавляю панель JQM на страницу, карта не отображается. Смотрите http://jsfiddle.net/fRXPc/3 /

Я заметил, что то, что JQM делает за кулисами, — это добавляет div с классом .ui-panel-wrapper . Этот div переносит содержимое div. Другими словами, это дочерний элемент страницы и содержит содержимое div. Добавление .ui-panel-wrapper на мою страницу css решает мою проблему. Смотрите http://jsfiddle.net/fRXPc/2 /

 #map-page, #map-canvas, .ui-panel-wrapper{
  width: 100%;
  height: 100%;
  padding: 0px; 
}

Мой вопрос: почему? Я борюсь с CSS — почему установка высоты напрямую для map-canvas не помогает? Я бы подумал, что это переопределит любые значения, которые он получает из div-оболочки панели. Это базовый CSS, который я должен знать, или происходит какая-то ловкость рук JQM?

Комментарии:

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

2. Хорошо … очевидно, мне нужно ознакомиться с css. Я предположил, что divs будут наследовать стили высоты от родителей. @dr.molle вы хотите сказать, что мне нужно явно установить высоту для каждого элемента?

Ответ №1:

связано с комментарием:

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

стили высоты не будут унаследованы, вы можете прочитать подробности в ссылке:http://www.w3.org/TR/CSS2/visudet.html#the-height-property .

В принципе, вам не нужно устанавливать высоту для каждого элемента (для каждого типа элемента есть значения по умолчанию), но когда вы хотите задать определенную процентную высоту, родительский элемент также должен иметь стиль высоты. Когда родительский элемент также имеет процентную высоту, у его родительского элемента тоже должна быть установлена высота … и так далее. В данном конкретном случае это означает, что все предки #map_canvas должны иметь стиль высоты (что имеет место при добавлении селектора .ui-panel-wrapper , высота других предков будет установлена вашим пользовательским CSS или JQM)

Предками #map_canvas являются html>body>div#map-page>div.ui-panel-wrapper