CSS Height size in Browser

Question

My window is split into 3 parts, the header, Section and footer. the section part is not being fully sized in the browser, instead it's cut off half way down the page.

I have tried changing the height attribute to 100% or 'Auto' but it doesn't seem to help. I've included the entire code as I am not sure what affects the sizing.

<!DOCTYPE html>
<html>
<head>
<style>
header {
    background-image: url("53.12-Day-1600x1200.jpg");
    color:white;
    text-align:left;
    padding:5px;     
    width:100%;
    height:20%;
}
nav {
    line-height:20px;
    background-color:#B0D4DB;
    height:auto;
    max-height:initial;
    width:10%;
    float:left;
    color:;     
}
**

*section {
        width:90%;
        background-color:#E9E9E9;
        float:left;
        text-align:center;  
        color: black;   
        height:auto;
        max-height:initial;
        font-family:courier;***
}
footer {
    background-color:#CDCDCD;
    color:black;
    clear:both;
    text-align:left;     
    width:100%;  
    height:10%;
}
</style>
</head>


<header> 
<h1> Find Break </h1>
</header>

<body>
<nav>
<p><a href="layout test v3.html">About</a></p><br>
<p><a href="search break page.html">Search Break</a></p><br>
<p><a href="Contact Us Page.html">Contact us</a></p>
</nav>

<section> 
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<style type="text/css">

    #tfnewsearch{
        float:center;
        padding:20px;
    }
    .tftextinput{
        margin: 0;
        padding: 5px 15px;
        font-family: Arial, Helvetica, sans-serif;
        font-size:14px;
        border:1px solid #0076a3; 
        border-right:0px;
        border-top-left: 5px 5px;
        border-bottom-left: 5px 5px;
    }
    .tfbutton {
        margin: 0;
        padding: 5px 15px;
        font-family: Arial, Helvetica, sans-serif;
        font-size:14px;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        color: #ffffff;
        border: solid 1px #0076a3; border-right:0px;
        background: #0095cd;
        background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
        background: -moz-linear-gradient(top,  #00adee,  #0078a5);
        border-top-right-radius: 5px 5px;
        border-bottom-right-radius: 5px 5px;
    }
    .tfbutton:hover {
        text-decoration: none;
        background: #007ead;
        background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
        background: -moz-linear-gradient(top,  #0095cc,  #00678e);
    }
    .tfbutton::-moz-focus-inner {
      border: 0;
    }
    .tfclear{
        clear:both;
    }
</style>

<br>
<p1> Search for your favourite surf spots below </p1> 
<br>
<div id="tfheader">
        <form id="tfnewsearch" method="get" action="http://www.google.com">
                <input type="text" class="tftextinput" name="q" size="21" maxlength="20"><input type="submit" value="search" class="tfbutton">
      </form>
    <div class="tfclear"></div>
    </div>

 <!-- Google Map -->
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
<div style='overflow:hidden;height:200x;width:500px;'>
<div id='gmap_canvas' style='height:200px;width:500px;'></div>
<div><small><a href="http://embedgooglemaps.com">embed google maps</a></small></div>
<div><small><a href="http://www.autohuren.world/">auto huren</a></small></div>
<style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
</div>

<script type='text/javascript'>function init_map(){var myOptions = {zoom:11,center:new google.maps.LatLng(-33.598169871799726,151.3341166752075),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(-33.598169871799726,151.3341166752075)});infowindow = new google.maps.InfoWindow({content:'<strong>Title</strong><br>Palm Beach, NSW<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>    

</section>
</body>

<footer> <small>© Copyright 2101, PSX </small> </footer>
</html>

Here's an explanation of the problem: [**Working with the CSS `height` property and percentage values**](http://stackoverflow.com/a/31728799/3597276) — Michael Benjamin, May 17 '16 at 00:12

score 2 · Answer 1 · answered May 16 '16 at 23:07

To make the section 100% in height, you'll need the parent to be 100% height too. In other words, your body has to be set at height:100% with the section set as the same.

You could also use vh (vertical height) units like so, which wouldn't require the 100% height on the body

section{
    height:100vh;
}

score 1 · Answer 2 · edited May 23 '17 at 11:59

Any time you have a float:_____, the floated element loses its height. It is visible, but it is as if it has zero height. Stuff will overwrite it -- sizing does not work.

So what to do?

There is a simple fix. Ensure the floated element is inside another container (a div, usually) and style that container overflow:hidden or overflow:auto. There are other solutions that involve creating pseudo-elements, and those work great and are a bit "more elegant", but this method works just fine.

References:

Customising Insightly HTML contact form (aligned, spaced fields)

CSS container div not getting height

Align <ul> center with others

Johannes · Answer 3 · 2016-05-17T16:04:45.187

0

For a percentage-based height setting to work for an element, its parent element needs to have a height definition. In your case, that's <body>, so you need to add

body {
  height: 100%;
}

...and don't float it - it will loose its height setting if you do

edited May 17 '16 at 16:04

answered May 16 '16 at 22:58

Johannes

53,485
15
52
104

CSS Height size in Browser

3 Answers3