在父母Div使用Display:Flex属性时，向孩子展示地图宽度和高度100％

我试图在弹性容器内显示地图上的宽度和高度，但找不到任何完美的解决方案。

<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类现在无法正常工作。

问题是您的身体没有整个宽度和高度，并且要解决您必须首先设置HTML W＆amp;h。

另外，一些孩子需要100％W＆amp;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;
}

我通过使用以下两种情况

解决了此问题

1。让弹性项目的孩子填补高度100％

设置位置：相对；在孩子的父母身上。
设置位置：绝对；在孩子上。
然后您可以根据需要设置宽度/高度（在我的样本中100％）。

2。修复chrome

中的滚动滚动"怪异"

放置溢出：自动；在可滚动的div。
可滚动div必须具有明确的高度。
我的样本已经具有100％的高度，但是如果没有应用，则可以指定高度：0;

相关内容

最新更新

热门标签：