浏览器中的CSS高度尺寸

问题描述：

我的窗口分为3部分，标题，部分和页脚。截面部分在浏览器中的大小并不完全相同，而是在页面的中间部分截断。浏览器中的CSS高度尺寸

我试过改变高度属性为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>

在这里，100％的高度是问题的解释：[**与CSS工作'高度属性和百分比值**]（http://stackoverflow.com/a/31728799/3597276） –

答

要使基于百分比的高度设置适用于元素，其父元素需要具有高度定义。在你的情况，这是<body>，所以你需要添加

body { 
    height: 100%; 
}

...不要浮它 - 如果你这样做

答

任何时候，它会失去它的高度设置你有float:_____中，浮动元素失去其高度。它是可见的，但它好像没有高度。东西会覆盖它 - 大小不起作用。

那该怎么办？

有一个简单的修复。确保浮动元素位于另一个容器（通常为div）内，并且风格为容器overflow:hidden或overflow:auto。 还有其他的解决方案，涉及到创建伪元素，这些工作很好，有点“更优雅”，但这种方法工作得很好。

参考文献：

Customising Insightly HTML contact form (aligned, spaced fields)

CSS container div not getting height

Align <ul> center with others

答

要在高度的部分100％，则需要家长为100％的高度了。换句话说，您的身体必须被设置为height:100%，并且设置的部分相同。

你也可以用VH（垂直高度）为单位，像这样，这将不需要对身体

section{ 
    height:100vh; 
}

非常感谢，工作就像一个魅力:) – TheJarrah123

浏览器中的CSS高度尺寸

相关推荐