Div容器溢出一排

时间:2016-04-07 16:08:40

标签: css twitter-bootstrap

将所有父项设置为100%的高度并在我的地图上方添加一个新的div容器后,我在行中获得了地图容器的溢出。地图上方的新div就是这个,locationQuickSearch id:

enter image description here

enter image description here

这是从哪里来的?

<div id="page-content-wrapper">
    <div class="content-container container-fluid">
        <div class="row">
            <div class="col-md-5 mapContainer">
                <!-- Quicksearch -->
                <div id="LocationQuickSearch">
                    <form role="form">
                        <div class="form-group">
                            <label>Addresse</label>
                            <input class="form-control" id="searchAddress" v-model="searchAddress" placeholder="Bitte geben Sie eine Suchaddresse ein." v-on:focus='clearFormFields'>
                        </div>
                    </form>
                </div>

                <!-- GIS MAP -->
                <div id="GISMap" v-el:map></div>
            </div>

            <!-- Form -->
            <div class="col-md-7 incidentContainer">
                <div class="incidentForm"> (...)

#LocationQuickSearch {
  height: 100px;
  width: 100%;
  background-color: yellow;
  padding: 10px;
  clear: both;
}

// --Page Content
#page-content-wrapper {
  height: 100%;
  padding: 0;
  background-color: red;
}

.row, .container-fluid {
  height: 100%;
}

.row .mapContainer {
  padding: 0px;
  height: 100%;
  background-color: red;
}

.row .incidentContainer {
  padding: 0px;
  height: 100%;
}

.incidentForm {
  height: 100%;
  width: 100%;
  background-color: lightgray;
}

0 个答案:

没有答案