Fluid responsive layout with full 100% height

Question

I need to center vertically a form with fields (input/select) inside a search container. The layout is intented to be 100% width and 100% height.

I try to center the form using fluid paddings but it's pushing everything down:

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 */
}

Main View:

<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>

Map View:

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

enter image description here

The problem is from the reset.css file:

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

and the to set th height of the page to 100%:

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

Script to build the map:

// 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);
};

In IE11, Chrome 40, and FireFox 36, that snippet seems to work just fine. JSFiddle: http://jsfiddle.net/s67eL8k0/ Is there any manipulation being applied to the styling from your render? — Christopher Esbrandt, Mar 09 '15 at 15:17
Look around in this thread ... http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div — Daniel, Mar 09 '15 at 15:18
Hi @AoN it seems coming from the reset.css standard file that this is "pushed" down. I edit the question with the source, any ideia why? — Patrick, Mar 09 '15 at 15:40
@Patrick I've added that new snippet of CSS and it has no noticeable affect on what I'm seeing on any of the three browsers. JSFiddle: http://jsfiddle.net/ku8whqad/2/ — Christopher Esbrandt, Mar 09 '15 at 15:45
@AoN if I remove the tag "html" from the CSS, it works fine but I'm not enable to set the height of all the other containers to 100% height — Patrick, Mar 09 '15 at 16:01

score 0 · Answer 1 · answered Mar 09 '15 at 16:28

0

Alright, the issue isn't with applying height: 100% to html but of applying it to .ctn combined with the padding-top and padding-bottom on .ctn .sch-ctn. Not sure why you would need to make .ctn have full height when the only style you're applying is width and background-color.

So, I applied the background-color to html, body and removed the height from .ctn and it appears just fine in my current three browsers.

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/

answered Mar 09 '15 at 16:28

Christopher Esbrandt

1,198
9
22

I have now discover that your example works fine, but I have a div with a google map that does not show up if I don't set the height of the main container to 100%. – Patrick Mar 09 '15 at 16:32
@Patrick Like this: http://jsfiddle.net/ku8whqad/4/? There's so many ways to add a Google-generated map, I can't really tailor that adaption to your situation unless you provide your version of the embed (you can leave out the API key if you're concerned about that). Basically, I just used W3Schools (http://www.w3schools.com/googleapi/google_maps_basic.asp) to embed a map and worked out the calculations to get the margin and height correct. – Christopher Esbrandt Mar 09 '15 at 17:06
Why do you put the map at a absolute position regarding the sequence of the DOM construction like I was trying to do? – Patrick Mar 09 '15 at 17:09
The `position: absolute;` is to apply the `z-index: -1;` should you be using a different UI than this and can make the `height: 100%;` and remove the `margin` from `#googleMap`. If I make this changes on this method of embedding Google Maps, you get this: http://jsfiddle.net/ku8whqad/5/. The idea was just to make it adaptive to whatever method you might already be using. – Christopher Esbrandt Mar 09 '15 at 17:12
Sorry but I did not understand your option for position absolute – Patrick Mar 09 '15 at 17:14
In order to use `z-index`, the `position` must be set to `absolute`, `relative`, or `fixed`. If you remove the `z-index` from `#googleMap`, or set it above `-1`, the Google API will force the map above everything else on the page. Here's the example without the `position` and `z-index` applied to `#googleMap`: http://jsfiddle.net/ku8whqad/6/. – Christopher Esbrandt Mar 09 '15 at 17:17
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/72591/discussion-between-patrick-and-aon). – Patrick Mar 09 '15 at 17:21

Fluid responsive layout with full 100% height

1 Answers1