Question

我需要在搜索容器内垂直居中一个带有字段（输入/选择）的表单。布局的目标是100％宽度和100％高度。

我尝试使用流体填充物将形状居中，但它会将所有东西都推下来：

html,
body {
    height: 100%;
    overflow: hidden;
}

.main-ctn {
    width: 100%;
    height: 100%;
    background-color: #808080;
}

.search-ctn {
    width: 100%;
    height: 3.703703704%;
    background-color: #fff;
    float: left;
    padding-top: 2.314814815%;
    padding-bottom: 2.314814815%;
}

.map-ctn {
    width: 85%;
    height: 88.42592593%;
    background-color: #0094ff;
    float: left;
}

.result-list-ctn {
    width: 15%;
    height: 88.42592593%;
    background-color: #ffd800;
    float: right;
}

.footer-ctn {
    width: 100%;
    height: 1.388888889%;
    background-color: #ff6a00;
    float: left;
    padding-top: 0.925925926%;
    padding-bottom: 0.925925926%;
}

.map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

.map-canvas img {
    max-width: none; /* we need to overide the img { max-width: 100%; } to display the controls correctly */
}

主要观点：

<body>
    <div class="main-ctn">
        <div class="search-ctn">

            <!-- Search form -->
            @{ Html.RenderAction(MVC.Partner.Search()); }

        </div>
        <div class="map-ctn">

            <!-- Map container -->
            @{ Html.RenderAction(MVC.Map.Index()); }

        </div>
        <div class="result-list-ctn"></div>

        <div class="footer-ctn"></div>
    </div>

</body>
</html>

地图视图：

<div id="map-canvas" class="map-canvas"></div>

enter image description here

问题来自reset.css文件：

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

并将页面高度设置为100％：

html,
body {
    height: 100%;
    overflow: hidden;
}

构建地图的脚本：

// Private variables
var _map;
var _mapCanvas = "map-canvas";
var _initialCenterLat = "39.843077";  // Center of Portugal
var _initialCenterLng = "-7.992554";
var _initialZoom = 7;

build = function () {

    var mapOptions = {

        center: new google.maps.LatLng(_initialCenterLat, _initialCenterLng),
        zoom: _initialZoom
    };

    _map = new google.maps.Map(document.getElementById(_mapCanvas), mapOptions);
};

Answer 1

好的，问题不在于将height: 100%应用于html，而是将其应用于.ctn以及padding-top和padding-bottom .ctn .sch-ctn 1}}。当你申请的唯一款式是.ctn和width时，不确定为什么你需要让background-color拥有完整的高度。

因此，我将background-color应用于html, body并从height移除了.ctn，在我目前的三种浏览器中看起来很不错。

html, body {
    height: 100%;
    overflow: hidden;
    background-color: #808080;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ctn {
    width: 100%;
//    height: 100%;
}

.ctn .sch-ctn {
    width: 100%;
    height: 3.703703704%;
    background-color: #b6ff00;
    float: left;
    padding-top: 2.314814815%;
    padding-bottom: 2.314814815%;
}

<div class="ctn">
    <div class="sch-ctn">

        <!-- Search form -->
        <input />

    </div>
</div>

JSFiddle：http://jsfiddle.net/ku8whqad/3/

流体响应布局，全高100％

1 个答案: