Показывать ширину и высоту карты на 100% дочерним элементам, когда родительский элемент div использует свойство display: flex - PullRequest
Новая
       4

Показывать ширину и высоту карты на 100% дочерним элементам, когда родительский элемент div использует свойство display: flex

0 голосов
/ 18 февраля 2019

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

<style>
        body{
        
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            overflow-y: scroll;
        }

        .mgrid{
          display: flex;
          flex-direction: column;
          flex: 1;
        }

        header{
          position:relative; height:auto
        }

        .m-grid__item{
          display: flex;
          display: -ms-flexbox;
          flex-direction: row;
          height:100%;
        }
        .m-wrapper{
          flex:1 auto;
          overflow:hidden
          
        }
        .mapdiv{
          position:absolute;
          width:100%;
          height:100%;
          top:0;bottom:0;
        }
        </style>
<body>
              <div class="m-grid">
                  <header>

                  </header>
                  <div class="m-grid__item">
                      <div class="m-wrapper">
                          <div class="mapdiv"></div>

                      </div>
                  </div>

              </div>
        
        
        </body

Хотите показать карту Div на полную ширину и высоту.Прямо сейчас карта занимает дополнительную высоту.Класс m-wrapper не работает должным образом.

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Я исправил эту проблему, используя следующие две ситуации

1.Получение дочернего элемента flex-элемента для заполнения высотой 100%

  • Установить положение: относительное;на родителя ребенка.
  • Установить положение: абсолютное;на ребенка.
  • Затем вы можете установить ширину / высоту, как требуется (100% в моем образце).

2.Исправление прокрутки прокрутки изменения размера в Chrome

  • Put overflow-y: auto;в прокручиваемом div.
  • Для прокручиваемого div необходимо указать явную высоту.
  • Мой образец уже имеет высоту 100%, но если он еще не применен, вы можете указать высоту: 0;
0 голосов
/ 19 февраля 2019

Проблема в том, что ваше тело не имеет всей ширины и высоты, и чтобы решить, что вы должны сначала установить HTML w & h.

Кроме того, некоторым детям требуется 100% w & h.чтобы соответствовать размеру родителей.

Вот решение. 

html, body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  position: relative;
}

.m-grid, .m-grid__item {
  width: 100%;
  height: 100%;
}

.mgrid{
  display: flex;
  flex-direction: column;
  flex: 1;
}

header{
  position:relative; height:auto
}

.m-grid__item{
  display: flex;
  height:100%;
}
.m-wrapper{
  flex:1 auto;
  overflow:hidden
}

.mapdiv{
  position:absolute;
  width:100%;
  height:100%;
  top:0;bottom:0;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...