logo标签列表

Bootstrap模态框，滚动条不起作用。

htmlcssbootstrap-4bootstrap-modal
5
我有一个带有内容的Bootstrap 4.5模态框，如果内容超出窗口大小限制，将默认出现滚动条。
我还尝试添加'modal-dialog-scrollable'类，但是我没有看到任何滚动条，而且对话框的某些部分也无法访问!
如果有人知道这个问题的解决方法，请告诉我。
这里是生成代码的一小部分： https://codepen.io/cdemez/pen/BajrJzW 
..

enter image description here

1
请提供代码！ - Abhishek Pandey
3个回答
24
您需要按照 Bootstrap 的层次结构进行操作。您的代码为 modal-dialog > modal-content > form > modal-body。我将其更改为 modal-dialog > modal-content > modal-body > form。modal-body 应该是 modal-content 的直接子元素，其他部分没问题。PS：由于 SO 的最大字符验证，我不得不删除地图代码。 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div id="modal_639f8823-84ba-442d-8aac-c64276ce126e" class="modal fade show" data-backdrop="static" style="z-index: 1040; display: block;" tabindex="-1" role="dialog" aria-modal="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable " role="document">
    <div class="modal-content" style="">
      <div class="modal-header">
        <h5 class="modal-title">Create your first store</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button></div>
      <div class="modal-body">
        <form id="myform">
          <div>
            <div class="mb-2">
              <div class="input-group"> <input placeholder="Store's name" aria-label="" aria-describedby="basic-addon1" class="form-control valid"></div>
            </div>
            <div class="form-group mb-2 row">
              <div class="input-group col-sm-12">
                <div class="blazored-typeahead valid">
                  <div class="blazored-typeahead__controls"><input placeholder="Address" autocomplete="off" type="text" class="blazored-typeahead__input" _bl_6ddea9fa-d464-44f6-9aa9-9f0b16dbba43=""></div>
                </div>
              </div>
            </div>
            <div class="mb-2">
              <div class="input-group">
                <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fas fa-phone"></i></span></div> <input placeholder="Phone" aria-label="" aria-describedby="basic-addon1" class="form-control valid"></div>
            </div>
            <div class="mb-2">
              <div class="input-group">
                <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fas fa-envelope"></i></span></div> <input type="text" placeholder="email" aria-label="" aria-describedby="basic-addon1" class="form-control valid"></div>
            </div>
            <div class="mb-2">
              <div class="input-group">
                <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fas fa-globe-americas"></i></span></div> <input type="text" placeholder="Web site" aria-label="" aria-describedby="basic-addon1" class="form-control valid"></div>
            </div>
            <div class="mb-2">
              <div class="input-group">
                <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fab fa-facebook-f"></i></span></div> <input type="text" placeholder="Facebook page" aria-label="" aria-describedby="basic-addon1" class="form-control valid"></div>
            </div>
            <div class="mb-2 row"> <span class="input-group col-5"> <input step="any" placeholder="Longitude" aria-label="" aria-describedby="basic-addon1" type="number" class="form-control valid"> </span> <span class="input-group col-5" style="padding-left:0px"> <input step="any" placeholder="Latitude" aria-label="" aria-describedby="basic-addon1" type="number" class="form-control valid"> </span>              <span class="input-group col-2" style="padding-left:0px"> <button type="button" class="btn btn-primary"> <i class="fas fa-map-marker-alt"></i></button> </span></div>
            <div style="height:300px"></div>
          </div>
        </form>

      </div>
      <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="submit" class="btn btn-primary" form="myform">Create a PRO account</button>

      </div>
    </div>
  </div>
</div>

更新：由于提交按钮不在表单内，因此表单未提交。

解决方案：在提交按钮上使用值为表单ID的form属性即可提交表单。

<button type="submit" class="btn btn-primary" form="myform">Create a PRO account</button>
1
form 属性对我来说也很关键。在 modal-body 中放置表单，但将 submit 放在 modal-footer 中需要进行此更改。谢谢！ - jtcrow
2

从我的示例中可以看出，诀窍是在模态框中使用overflow-y：initial！important。

.modal{
    display: block !important;
}

.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 250px;
    overflow-y: auto;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">  <div id="modal_639f8823-84ba-442d-8aac-c64276ce126e" class="modal fade show" data-backdrop="static" style="z-index: 1040; display: block;" tabindex="-1" role="dialog" aria-modal="true"> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable " role="document"> <div class="modal-content" style=""> <div class="modal-header"> <h5 class="modal-title">Create your first store</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <form> <div class="modal-body">  <div>  <div class="mb-2"> <div class="input-group"> <input placeholder="Store's name" aria-label="" aria-describedby="basic-addon1" class="form-control valid"> </div>  </div>  <div class="form-group mb-2 row"> <div class="input-group col-sm-12">  <div class="blazored-typeahead valid">  <div class="blazored-typeahead__controls">  <input placeholder="Address" autocomplete="off" type="text" class="blazored-typeahead__input" _bl_6ddea9fa-d464-44f6-9aa9-9f0b16dbba43="">   </div>  </div>   </div>    </div>   <div class="mb-2">  <div class="input-group">   <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fas fa-phone"></i></span> </div> <input placeholder="Phone" aria-label="" aria-describedby="basic-addon1" class="form-control valid">  </div>    </div>   <div class="mb-2">  <div class="input-group">   <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fas fa-envelope"></i></span> </div> <input type="text" placeholder="email" aria-label="" aria-describedby="basic-addon1" class="form-control valid">  </div>    </div>   <div class="mb-2">  <div class="input-group">   <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fas fa-globe-americas"></i></span> </div> <input type="text" placeholder="Web site" aria-label="" aria-describedby="basic-addon1" class="form-control valid">  </div>   </div>   <div class="mb-2">  <div class="input-group">   <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fab fa-facebook-f"></i></span> </div> <input type="text" placeholder="Facebook page" aria-label="" aria-describedby="basic-addon1" class="form-control valid">  </div>    </div>   <div class="mb-2 row">  <span class="input-group col-5">  <input step="any" placeholder="Longitude" aria-label="" aria-describedby="basic-addon1" type="number" class="form-control valid">  </span>  <span class="input-group col-5" style="padding-left:0px">  <input step="any" placeholder="Latitude" aria-label="" aria-describedby="basic-addon1" type="number" class="form-control valid">  </span>  <span class="input-group col-2" style="padding-left:0px">  <button type="button" class="btn btn-primary"> <i class="fas fa-map-marker-alt"></i></button>  </span>  </div>   <div style="height:300px">   <div id="mapGoogle" style="height: 300px; position: relative; overflow: hidden;" _bl_09783738-47f8-45a6-bbe7-af34189f041a=""> <div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: rgb(229, 227, 223);"> <div class="gm-style" style="position: absolute; z-index: 0; left: 0px; top: 0px; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px;"> <div tabindex="0" style="position: absolute; z-index: 0; left: 0px; top: 0px; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; cursor: url(&quot;https://maps.gstatic.com/mapfiles/openhand_8_8.cur&quot;), default; touch-action: none;"> <div style="z-index: 1; position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(0px, 0px);"> <div style="position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;"> <div style="position: absolute; left: 0px; top: 0px; z-index: 0;"> <div style="position: absolute; z-index: 985; transform: matrix(1, 0, 0, 1, -161, -3);"> <div style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px;"> <div style="width: 256px; height: 256px;"></div> </div> <div style="position: absolute; left: -256px; top: 0px; width: 256px; height: 256px;"> <div style="width: 256px; height: 256px;"></div> </div> <div style="position: absolute; left: -256px; top: -256px; width: 256px; height: 256px;"> <div style="width: 256px; height: 256px;"></div> </div> <div style="position: absolute; left: 0px; top: -256px; width: 256px; height: 256px;"> <div style="width: 256px; height: 256px;"></div> </div> <div style="position: absolute; left: 256px; top: -256px; width: 256px; height: 256px;"> <div style="width: 256px; height: 256px;"></div> </div> <div style="position: absolute; left: 256px; top: 0px; width: 256px; height: 256px;"> <div style="width: 256px; height: 256px;"></div> </div> </div> </div> </div> <div style="position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;"></div> <div style="position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;"></div> <div style="position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;"> <div style="position: absolute; left: 0px; top: 0px; z-index: -1;"> <div style="position: absolute; z-index: 985; transform: matrix(1, 0, 0, 1, -161, -3);"> <div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 0px; top: 0px;"></div> <div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -256px; top: 0px;"></div> <div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -256px; top: -256px;"></div> <div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 0px; top: -256px;"></div> <div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 256px; top: -256px;"></div> <div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 256px; top: 0px;"></div> </div> </div> <div style="width: 27px; height: 43px; overflow: hidden; position: absolute; left: -14px; top: -43px; z-index: 0;"><img alt="" src="https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2_hdpi.png" draggable="false" style="position: absolute; left: 0px; top: 0px; width: 27px; height: 43px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div> </div> <div style="position: absolute; left: 0px; top: 0px; z-index: 0;"> <div style="position: absolute; z-index: 985; transform: matrix(1, 0, 0, 1, -161, -3);"> <div style="position: absolute; left: -256px; top: 0px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i15!2i16842!3i11028!4i256!2m3!1e0!2sm!3i519235472!3m17!2sfr-FR!3sUS!5e18!12m4!1e68!2m2!1sset!2sRoadmap!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy5lOmd8cC5jOiNmZjFkMmM0ZCxzLmU6bC50LmZ8cC5jOiNmZjhlYzNiOSxzLmU6bC50LnN8cC5jOiNmZjFhMzY0NixzLnQ6MXxwLnY6b2ZmLHMudDoxN3xzLmU6Zy5zfHAuYzojZmY0YjY4Nzgscy50OjIxfHMuZTpnLnN8cC5jOiNmZjY0Nzc5ZSxzLnQ6MTh8cy5lOmcuc3xwLmM6I2ZmNGI2ODc4LHMudDo4MXxzLmU6Zy5zfHAuYzojZmYzMzRlODcscy50OjgyfHMuZTpnfHAuYzojZmYwMjNlNTgscy50OjJ8cy5lOmd8cC5jOiNmZjI4M2Q2YSxzLnQ6MnxzLmU6bC50LmZ8cC5jOiNmZjZmOWJhNSxzLnQ6MnxzLmU6bC50LnN8cC5jOiNmZjFkMmM0ZCxzLnQ6NDB8cy5lOmcuZnxwLmM6I2ZmMWQyYzRkLHMudDozfHMuZTpnfHAuYzojZmYzMDRhN2Qscy50OjN8cy5lOmwudC5mfHAuYzojZmY5OGE1YmUscy50OjN8cy5lOmwudC5zfHAuYzojZmYxZDJjNGQscy50OjQ5fHMuZTpnfHAuYzojZmYyYzY2NzUscy50OjQ5fHMuZTpnLnN8cC5jOiNmZjI1NTc2MyxzLnQ6NDl8cy5lOmwudC5mfHAuYzojZmZiMGQ1Y2Uscy50OjQ5fHMuZTpsLnQuc3xwLmM6I2ZmMDIzZTU4LHMudDo0fHMuZTpsLnQuZnxwLmM6I2ZmOThhNWJlLHMudDo0fHMuZTpsLnQuc3xwLmM6I2ZmMWQyYzRkLHMudDo2NXxzLmU6bC50LmZ8cC5jOiNmZjI4M2Q2YSxzLnQ6NjZ8cy5lOmd8cC5jOiNmZjNhNDc2MixzLnQ6NnxzLmU6Z3xwLmM6I2ZmMGUxNjI2LHMudDo2fHMuZTpsLnQuZnxwLmM6I2ZmNGU2ZDcw!4e0!5m1!5f2&amp;key=AIzaSyAl3thCtD7hLED8qH2AS026Srd1ozOkqwk&amp;token=29810" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div> <div style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i15!2i16843!3i11028!4i256!2m3!1e0!2sm!3i519235472!3m17!2sfr-FR!3sUS!5e18!12m4!1e68!2m2!1sset!2sRoadmap!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy5lOmd8cC5jOiNmZjFkMmM0ZCxzLmU6bC50LmZ8cC5jOiNmZjhlYzNiOSxzLmU6bC50LnN8cC5jOiNmZjFhMzY0NixzLnQ6MXxwLnY6b2ZmLHMudDoxN3xzLmU6Zy5zfHAuYzojZmY0YjY4Nzgscy50OjIxfHMuZTpnLnN8cC5jOiNmZjY0Nzc5ZSxzLnQ6MTh8cy5lOmcuc3xwLmM6I2ZmNGI2ODc4LHMudDo4MXxzLmU6Zy5zfHAuYzojZmYzMzRlODcscy50OjgyfHMuZTpnfHAuYzojZmYwMjNlNTgscy50OjJ8cy5lOmd8cC5jOiNmZjI4M2Q2YSxzLnQ6MnxzLmU6bC50LmZ8cC5jOiNmZjZmOWJhNSxzLnQ6MnxzLmU6bC50LnN8cC5jOiNmZjFkMmM0ZCxzLnQ6NDB8cy5lOmcuZnxwLmM6I2ZmMWQyYzRkLHMudDozfHMuZTpnfHAuYzojZmYzMDRhN2Qscy50OjN8cy5lOmwudC5mfHAuYzojZmY5OGE1YmUscy50OjN8cy5lOmwudC5zfHAuYzojZmYxZDJjNGQscy50OjQ5fHMuZTpnfHAuYzojZmYyYzY2NzUscy50OjQ5fHMuZTpnLnN8cC5jOiNmZjI1NTc2MyxzLnQ6NDl8cy5lOmwudC5mfHAuYzojZmZiMGQ1Y2Uscy50OjQ5fHMuZTpsLnQuc3xwLmM6I2ZmMDIzZTU4LHMudDo0fHMuZTpsLnQuZnxwLmM6I2ZmOThhNWJlLHMudDo0fHMuZTpsLnQuc3xwLmM6I2ZmMWQyYzRkLHMudDo2NXxzLmU6bC50LmZ8cC5jOiNmZjI4M2Q2YSxzLnQ6NjZ8cy5lOmd8cC5jOiNmZjNhNDc2MixzLnQ6NnxzLmU6Z3xwLmM6I2ZmMGUxNjI2LHMudDo2fHMuZTpsLnQuZnxwLmM6I2ZmNGU2ZDcw!4e0!5m1!5f2&amp;key=AIzaSyAl3thCtD7hLED8qH2AS026Srd1ozOkqwk&amp;token=91916" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div> <div style="position: absolute; left: -256px; top: -256px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i15!2i16842!3i11027!4i256!2m3!1e0!2sm!3i519235472!3m17!2sfr-FR!3sUS!5e18!12m4!1e68!2m2!1sset!2sRoadmap!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy5lOmd8cC5jOiNmZjFkMmM0ZCxzLmU6bC50LmZ8cC5jOiNmZjhlYzNiOSxzLmU6bC50LnN8cC5jOiNmZjFhMzY0NixzLnQ6MXxwLnY6b2ZmLHMudDoxN3xzLmU6Zy5zfHAuYzojZmY0YjY4Nzgscy50OjIxfHMuZTpnLnN8cC5jOiNmZjY0Nzc5ZSxzLnQ6MTh8cy5lOmcuc3xwLmM6I2ZmNGI2ODc4LHMudDo4MXxzLmU6Zy5zfHAuYzojZmYzMzRlODcscy50OjgyfHMuZTpnfHAuYzojZmYwMjNlNTgscy50OjJ8cy5lOmd8cC5jOiNmZjI4M2Q2YSxzLnQ6MnxzLmU6bC50LmZ8cC5jOiNmZjZmOWJhNSxzLnQ6MnxzLmU6bC50LnN8cC5jOiNmZjFkMmM0ZCxzLnQ6NDB8cy5lOmcuZnxwLmM6I2ZmMWQyYzRkLHMudDozfHMuZTpnfHAuYzojZmYzMDRhN2Qscy50OjN8cy5lOmwudC5mfHAuYzojZmY5OGE1YmUscy50OjN8cy5lOmwudC5zfHAuYzojZmYxZDJjNGQscy50OjQ5fHMuZTpnfHAuYzojZmYyYzY2NzUscy50OjQ5fHMuZTpnLnN8cC5jOiNmZjI1NTc2MyxzLnQ6NDl8cy5lOmwudC5mfHAuYzojZmZiMGQ1Y2Uscy50OjQ5fHMuZTpsLnQuc3xwLmM6I2ZmMDIzZTU4LHMudDo0fHMuZTpsLnQuZnxwLmM6I2ZmOThhNWJlLHMudDo0fHMuZTpsLnQuc3xwLmM6I2ZmMWQyYzRkLHMudDo2NXxzLmU6bC50LmZ8cC5jOiNmZjI4M2Q2YSxzLnQ6NjZ8cy5lOmd8cC5jOiNmZjNhNDc2MixzLnQ6NnxzLmU6Z3xwLmM6I2ZmMGUxNjI2LHMudDo2fHMuZTpsLnQuZnxwLmM6I2ZmNGU2ZDcw!4e0!5m1!5f2&amp;key=AIzaSyAl3thCtD7hLED8qH2AS026Srd1ozOkqwk&amp;token=102610" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div> <div style="position: absolute; left: 256px; top: -256px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i15!2i16844!3i11027!4i256!2m3!1e0!2sm!3i519231824!3m17!2sfr-FR!3sUS!5e18!12m4!1e68!2m2!1sset!2sRoadmap!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy5lOmd8cC5jOiNmZjFkMmM0ZCxzLmU6bC50LmZ8cC5jOiNmZjhlYzNiOSxzLmU6bC50LnN8cC5jOiNmZjFhMzY0NixzLnQ6MXxwLnY6b2ZmLHMudDoxN3xzLmU6Zy5zfHAuYzojZmY0YjY4Nzgscy50OjIxfHMuZTpnLnN8cC5jOiNmZjY0Nzc5ZSxzLnQ6MTh8cy5lOmcuc3xwLmM6I2ZmNGI2ODc4LHMudDo4MXxzLmU6Zy5zfHAuYzojZmYzMzRlODcscy50OjgyfHMuZTpnfHAuYzojZmYwMjNlNTgscy50OjJ8cy5lOmd8cC5jOiNmZjI4M2Q2YSxzLnQ6MnxzLmU6bC50LmZ8cC5jOiNmZjZmOWJhNSxzLnQ6MnxzLmU6bC50LnN8cC5jOiNmZjFkMmM0ZCxzLnQ6NDB8cy5lOmcuZnxwLmM6I2ZmMWQyYzRkLHMudDozfHMuZTpnfHAuYzojZmYzMDRhN2Qscy50OjN8cy5lOmwudC5mfHAuYzojZmY5OGE1YmUscy50OjN8cy5lOmwudC5zfHAuYzojZmYxZDJjNGQscy50OjQ5fHMuZTpnfHAuYzojZmYyYzY2NzUscy50OjQ5fHMuZTpnLnN8cC5jOiNmZjI1NTc2MyxzLnQ6NDl8cy5lOmwudC5mfHAuYzojZmZiMGQ1Y2Uscy50OjQ5fHMuZTpsLnQuc3xwLmM6I2ZmMDIzZTU4LHMudDo0fHMuZTpsLnQuZnxwLmM6I2ZmOThhNWJlLHMudDo0fHMuZTpsLnQuc3xwLmM6I2ZmMWQyYzRkLHMudDo2NXxzLmU6bC50LmZ8cC5jOiNmZjI4M2Q2YSxzLnQ6NjZ8cy5lOmd8cC5jOiNmZjNhNDc2MixzLnQ6NnxzLmU6Z3xwLmM6I2ZmMGUxNjI2LHMudDo2fHMuZTpsLnQuZnxwLmM6I2ZmNGU2ZDcw!4e0!5m1!5f2&amp;key=AIzaSyAl3thCtD7hLED8qH2AS026Srd1ozOkqwk&amp;token=110394" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div> <div style="position: absolute; left: 0px; top: -256px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i15!2i16843!3i11027!4i256!2m3!1e0!2sm!3i519235472!3m17!2sfr-FR!3sUS!5e18!12m4!1e68!2m2!1sset!2sRoadmap!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy5lOmd8cC5jOiNmZjFkMmM0ZCxzLmU6bC50LmZ8cC5jOiNmZjhlYzNiOSxzLmU6bC50LnN8cC5jOiNmZjFhMzY0NixzLnQ6MXxwLnY6b2ZmLHMudDoxN3xzLmU6Zy5zfHAuYzojZmY0YjY4Nzgscy50OjIxfHMuZTpnLnN8cC5jOiNmZjY0Nzc5ZSxzLnQ6MTh8cy5lOmcuc3xwLmM6I2ZmNGI2ODc4LHMudDo4MXxzLmU6Zy5zfHAuYzojZmYzMzRlODcscy50OjgyfHMuZTpnfHAuYzojZmYwMjNlNTgscy50OjJ8cy5lOmd8cC5jOiNmZjI4M2Q2YSxzLnQ6MnxzLmU6bC50LmZ8cC5jOiNmZjZmOWJhNSxzLnQ6MnxzLmU6bC50LnN8cC5jOiNmZjFkMmM0ZCxzLnQ6NDB8cy5lOmcuZnxwLmM6I2ZmMWQyYzRkLHMudDozfHMuZTpnfHAuYzojZmYzMDRhN2Qscy50OjN8cy5lOmwudC5mfHAuYzojZmY5OGE1YmUscy50OjN8cy5lOmwudC5zfHAuYzojZmYxZDJjNGQscy50OjQ5fHMuZTpnfHAuYzojZmYyYzY2NzUscy50OjQ5fHMuZTpnLnN8cC5jOiNmZjI1NTc2MyxzLnQ6NDl8cy5lOmwudC5mfHAuYzojZmZiMGQ1Y2Uscy50OjQ5fHMuZTpsLnQuc3xwLmM6I2ZmMDIzZTU4LHMudDo0fHMuZTpsLnQuZnxwLmM6I2ZmOThhNWJlLHMudDo0fHMuZTpsLnQuc3xwLmM6I2ZmMWQyYzRkLHMudDo2NXxzLmU6bC50LmZ8cC5jOiNmZjI4M2Q2YSxzLnQ6NjZ8cy5lOmd8cC5jOiNmZjNhNDc2MixzLnQ6NnxzLmU6Z3xwLmM6I2ZmMGUxNjI2LHMudDo2fHMuZTpsLnQuZnxwLmM6I2ZmNGU2ZDcw!4e0!5m1!5f2&amp;key=AIzaSyAl3thCtD7hLED8qH2AS026Srd1ozOkqwk&amp;token=33645" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div> <div style="position: absolute; left: 256px; top: 0px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i15!2i16844!3i11028!4i256!2m3!1e0!2sm!3i519235472!3m17!2sfr-FR!3sUS!5e18!12m4!1e68!2m2!1sset!2sRoadmap!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy5lOmd8cC5jOiNmZjFkMmM0ZCxzLmU6bC50LmZ8cC5jOiNmZjhlYzNiOSxzLmU6bC50LnN8cC5jOiNmZjFhMzY0NixzLnQ6MXxwLnY6b2ZmLHMudDoxN3xzLmU6Zy5zfHAuYzojZmY0YjY4Nzgscy50OjIxfHMuZTpnLnN8cC5jOiNmZjY0Nzc5ZSxzLnQ6MTh8cy5lOmcuc3xwLmM6I2ZmNGI2ODc4LHMudDo4MXxzLmU6Zy5zfHAuYzojZmYzMzRlODcscy50OjgyfHMuZTpnfHAuYzojZmYwMjNlNTgscy50OjJ8cy5lOmd8cC5jOiNmZjI4M2Q2YSxzLnQ6MnxzLmU6bC50LmZ8cC5jOiNmZjZmOWJhNSxzLnQ6MnxzLmU6bC50LnN8cC5jOiNmZjFkMmM0ZCxzLnQ6NDB8cy5lOmcuZnxwLmM6I2ZmMWQyYzRkLHMudDozfHMuZTpnfHAuYzojZmYzMDRhN2Qscy50OjN8cy5lOmwudC5mfHAuYzojZmY5OGE1YmUscy50OjN8cy5lOmwudC5zfHAuYzojZmYxZDJjNGQscy50OjQ5fHMuZTpnfHAuYzojZmYyYzY2NzUscy50OjQ5fHMuZTpnLnN8cC5jOiNmZjI1NTc2MyxzLnQ6NDl8cy5lOmwudC5mfHAuYzojZmZiMGQ1Y2Uscy50OjQ5fHMuZTpsLnQuc3xwLmM6I2ZmMDIzZTU4LHMudDo0fHMuZTpsLnQuZnxwLmM6I2ZmOThhNWJlLHMudDo0fHMuZTpsLnQuc3xwLmM6I2ZmMWQyYzRkLHMudDo2NXxzLmU6bC50LmZ8cC5jOiNmZjI4M2Q2YSxzLnQ6NjZ8cy5lOmd8cC5jOiNmZjNhNDc2MixzLnQ6NnxzLmU6Z3xwLmM6I2ZmMGUxNjI2LHMudDo2fHMuZTpsLnQuZnxwLmM6I2ZmNGU2ZDcw!4e0!5m1!5f2&amp;key=AIzaSyAl3thCtD7hLED8qH2AS026Srd1ozOkqwk&amp;token=22951" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div> </div> </div> </div> <div class="gm-style-pbc" style="z-index: 2; position: absolute; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; left: 0px; top: 0px; opacity: 0; transition-duration: 0.2s;"> <p class="gm-style-pbt"></p> </div> <div style="z-index: 3; position: absolute; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; left: 0px; top: 0px; touch-action: pan-x pan-y;"> <div style="z-index: 4; position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(0px, 0px);"> <div style="position: absolute; left: 0px; top: 0px; z-index: 104; width: 100%;"></div> <div style="position: absolute; left: 0px; top: 0px; z-index: 105; width: 100%;"></div> <div style="position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"> <div style="width: 27px; height: 43px; overflow: hidden; position: absolute; opacity: 0; left: -14px; top: -43px; z-index: 0;"><img alt="" src="https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2_hdpi.png" draggable="false" usemap="#gmimap1" style="position: absolute; left: 0px; top: 0px; width: 27px; height: 43px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"><map name="gmimap1" id="gmimap1"><area log="miw" coords="13.5,0,4,3.75,0,13.5,13.5,43,27,13.5,23,3.75" shape="poly" title="" style="cursor: pointer; touch-action: none;"></map></div> </div> <div style="position: absolute; left: 0px; top: 0px; z-index: 107; width: 100%;"></div> </div> </div> </div><iframe aria-hidden="true" frameborder="0" tabindex="-1" style="z-index: -1; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; border: none;"></iframe> <div style="margin-left: 5px; margin-right: 5px; z-index: 1000000; position: absolute; left: 0px; bottom: 0px;"><a target="_blank" rel="noopener" href="https://maps.google.com/maps?ll=50.597092,5.049634&amp;z=15&amp;t=m&amp;hl=fr-FR&amp;gl=US&amp;mapclient=apiv3" title="Ouvrir cette zone dans Google&nbsp;Maps (dans une nouvelle fenêtre)" style="position: static; overflow: visible; float: none; display: inline;"> <div style="width: 66px; height: 26px; cursor: pointer;"><img alt="" src="https://maps.gstatic.com/mapfiles/api-3/images/google_white5_hdpi.png" draggable="false" style="position: absolute; left: 0px; top: 0px; width: 66px; height: 26px; user-select: none; border: 0px; padding: 0px; margin: 0px;"></div> </a></div> <div style="background-color: white; padding: 15px 21px; border: 1px solid rgb(171, 171, 171); font-family: Roboto, Arial, sans-serif; color: rgb(34, 34, 34); box-sizing: border-box; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 16px; z-index: 10000002; display: none; width: 300px; height: 180px; position: absolute; left: 27px; top: 60px;"> <div style="padding: 0px 0px 10px; font-size: 16px; box-sizing: border-box;">Données cartographiques</div> <div style="font-size: 13px;">Données cartographiques ©2020</div><button draggable="false" title="Fermer" aria-label="Fermer" type="button" class="gm-ui-hover-effect" style="background: none; display: block; border: 0px; margin: 0px; padding: 0px; position: absolute; cursor: pointer; user-select: none; top: 0px; right: 0px; width: 37px; height: 37px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000000%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="pointer-events: none; display: block; width: 13px; height: 13px; margin: 12px;"></button> </div> <div class="gmnoprint" style="z-index: 1000001; position: absolute; right: 280px; bottom: 0px; width: 126px;"> <div draggable="false" class="gm-style-cc" style="user-select: none; height: 14px; line-height: 14px;"> <div style="opacity: 0.7; width: 100%; height: 100%; position: absolute;"> <div style="width: 1px;"></div> <div style="background-color: rgb(245, 245, 245); width: auto; height: 100%; margin-left: 1px;"></div> </div> <div style="position: relative; padding-right: 6px; padding-left: 6px; box-sizing: border-box; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right; vertical-align: middle; display: inline-block;"><a style="text-decoration: none; cursor: pointer;">Données cartographiques</a><span style="display: none;">Données cartographiques ©2020</span></div> </div> </div> <div class="gmnoscreen" style="position: absolute; right: 0px; bottom: 0px;"> <div style="font-family: Roboto, Arial, sans-serif; font-size: 11px; color: rgb(68, 68, 68); direction: ltr; text-align: right; background-color: rgb(245, 245, 245);">Données cartographiques ©2020</div> </div> <div class="gmnoprint gm-style-cc" draggable="false" style="z-index: 1000001; user-select: none; height: 14px; line-height: 14px; position: absolute; right: 166px; bottom: 0px;"> <div style="opacity: 0.7; width: 100%; height: 100%; position: absolute;"> <div style="width: 1px;"></div> <div style="background-color: rgb(245, 245, 245); width: auto; height: 100%; margin-left: 1px;"></div> </div> <div style="position: relative; padding-right: 6px; padding-left: 6px; box-sizing: border-box; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right; vertical-align: middle; display: inline-block;"><a href="https://www.google.com/intl/fr-FR_US/help/terms_maps.html" target="_blank" rel="noopener" style="text-decoration: none; cursor: pointer; color: rgb(68, 68, 68);">Conditions d'utilisation</a></div> </div><button draggable="false" title="Passer en plein écran" aria-label="Passer en plein écran" type="button" class="gm-control-active gm-fullscreen-control" style="background: none rgb(255, 255, 255); border: 0px; margin: 10px; padding: 0px; position: absolute; cursor: pointer; user-select: none; border-radius: 2px; height: 40px; width: 40px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; overflow: hidden; display: none; top: 0px; right: 0px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%20018%2018%22%3E%0A%20%20%3Cpath%20fill%3D%22%23666%22%20d%3D%22M0%2C0v2v4h2V2h4V0H2H0z%20M16%2C0h-4v2h4v4h2V2V0H16z%20M16%2C16h-4v2h4h2v-2v-4h-2V16z%20M2%2C12H0v4v2h2h4v-2H2V12z%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="height: 18px; width: 18px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%0A%20%20%3Cpath%20fill%3D%22%23333%22%20d%3D%22M0%2C0v2v4h2V2h4V0H2H0z%20M16%2C0h-4v2h4v4h2V2V0H16z%20M16%2C16h-4v2h4h2v-2v-4h-2V16z%20M2%2C12H0v4v2h2h4v-2H2V12z%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="height: 18px; width: 18px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%0A%20%20%3Cpath%20fill%3D%22%23111%22%20d%3D%22M0%2C0v2v4h2V2h4V0H2H0z%20M16%2C0h-4v2h4v4h2V2V0H16z%20M16%2C16h-4v2h4h2v-2v-4h-2V16z%20M2%2C12H0v4v2h2h4v-2H2V12z%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="height: 18px; width: 18px;"></button> <div draggable="false" class="gm-style-cc" style="user-select: none; height: 14px; line-height: 14px; position: absolute; right: 0px; bottom: 0px;"> <div style="opacity: 0.7; width: 100%; height: 100%; position: absolute;"> <div style="width: 1px;"></div> <div style="background-color: rgb(245, 245, 245); width: auto; height: 100%; margin-left: 1px;"></div> </div> <div style="position: relative; padding-right: 6px; padding-left: 6px; box-sizing: border-box; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right; vertical-align: middle; display: inline-block;"><a target="_blank" rel="noopener" title="Signaler à Google une erreur dans la carte routière ou les images" href="https://www.google.com/maps/@50.5970919,5.0496343,15z/data=!10m1!1e1!12b1?source=apiv3&amp;rapsrc=apiv3" style="font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); text-decoration: none; position: relative;">Signaler une erreur cartographique</a></div> </div> </div> </div> </div>  </div>   </div>  </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data- dismiss="modal">Cancel</button> <button type="submit" class="btn btn-primary">Create a PRO account</button> </div> </form>  </div>  </div>  </div>

附注：我压缩了HTML文件，因为它太大了不能在此处发布。

1
谢谢，这个解决方案的问题在于您为内容设置了固定的大小/高度。在这种情况下，即使我有足够的空间，我也会看到滚动条 :-( - ClubberLang
-1

对我来说它正在工作。

.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 450px;
    overflow-y: auto;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接