浏览器中的 CSS 高度大小答案

【问题标题】：CSS Height size in Browser浏览器中的 CSS 高度大小
【发布时间】：2016-09-12 20:50:09
【问题描述】：

我的窗口分为 3 部分，页眉、节和页脚。该部分在浏览器中没有完全调整大小，而是在页面的一半处被切断。

我尝试将高度属性更改为 100% 或“自动”，但似乎没有帮助。我已经包含了整个代码，因为我不确定是什么影响了大小。

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

【问题讨论】：