Question

我正在尝试在弹性容器中显示全角和全角的Map，但是找不到任何完美的解决方案。

<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

想要显示Map div的完整宽度和高度。现在，地图占据了额外的高度。 m-wrapper类现在无法正常工作。

Answer 1

问题是您的身体没有整个宽度和高度，要解决这个问题，您必须先设置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;
}

Answer 2

我已通过以下两种情况解决了此问题

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

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

2。修复Chrome中调整大小的滚动“怪癖”

输入溢出-y：自动；在可滚动的div上。
可滚动div必须具有指定的显式高度。
我的样本已经具有100％的高度，但是如果尚未应用高度，则可以指定高度：0;

使用display：flex属性在父div上向子级显示地图宽度和高度100％

2 个答案: