<html> 和 <body> 不尊重100％的身高
[英]<html> and <body> not respecting 100% height
问题描述
I've been having no-end of issues with heights as of late. 
我最近一直没有达到高峰问题。
I managed to solve the heights of some elements with flex:auto and flex-shrink:0 . 我设法用flex:auto解决了一些元素的高度flex:auto和flex-shrink:0 。
I just can't get the HTML and Body tags to play ball (visible in element inspector after scroll line.) 我只是无法获取HTML和Body标签来播放球（在滚动线后的元素检查器中可见。）
I have the html and body height specified as 100% due to the fact that the homepage doesn't exceed the browser window and I need to push a footer to the bottom and fill the space. 我将html和body身高指定为100％，因为主页不超过浏览器窗口，我需要将页脚推到底部并填充空间。
I suspect though that this is potentially the cause of me experiencing issues when the page content exceeds the browser window. 我怀疑这可能是我在页面内容超出浏览器窗口时遇到问题的原因。
Please could somebody advise? 有人可以建议吗？
Here is my current attempt: 这是我目前的尝试：
@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,600'; a, a:hover { text-decoration: none; } html, body { height: 100%; } body { font-family: 'Open Sans', sans-serif; background: #fff; font-size: 16px; min-height: 100%; display: flex; flex-direction: column; } #page_wrap { display: flex; flex-direction: column; flex-shrink: 0; min-height: 100%; } header { background: #fff; text-align: center; padding: 0.625em 1.25em; flex-shrink: 0; } header h1 { font-size: 6em; font-weight: 400; color: #655e5e; margin: 0; display: inline-block; } @media screen and (min-width: 605px) and (max-width: 900px) { header h1 { font-size: 3.5em; } } @media screen and (min-width: 340px) and (max-width: 605px) { header h1 { font-size: 3em; } } @media screen and (max-width: 340px) { header h1 { font-size: 2em; } } header hr { max-width: 36em; margin-bottom: 0px; } header .fa-map-marker { color: #ec3b3b; font-size: 1.2em; } #refinement { padding: 0.625em 0 0; display: flex; align-items: center; justify-content: center; background: #fff; } #refinement form { display: flex; justify-content: center; flex-direction: column; } select#narrow:disabled { background: #dfdede; } .form_component { margin: 0 0.4em; display: none; padding: 0.625em; } .form_component i.fa { font-size: 1.4em; color: #655e5e; } main { background: #eaeaea; } #content { text-align: center; background: #655e5e; display: flex; flex-direction: column; flex-shrink: 0; align-items: center; justify-content: center; padding: 1.25em; } @media screen and (max-width: 900px) { #content { display: none; } } #content h2 { color: #fff; font-weight: 400; font-size: 3em; margin: 0; } @media screen and (max-width: 415px) { #content h2 { font-size: 2em; } } #content i.fa-globe { font-size: 14em; color: #fff; } @media screen and (max-width: 415px) { #content i.fa-globe { font-size: 10em; } } #place_results_wrap { flex: auto; flex-shrink: 0; } #place_results_wrap section h3 { font-weight: 400; } #place_results_wrap h3.placeholder { text-align: center; } .place_results { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 1.25em 0; } .next_page { padding: 0 1.250em; width: 100%; text-align: center; } .next_page button { background-color: #fff; border: none; color: #655e5e; padding: 0.3125em 2em; text-decoration: none; display: inline-block; font-size: 1em; font-weight: 600; cursor: pointer; border-radius: 1.25em; } .next_page button:hover { background-color: #f6f6f6; } .place { width: 24em; height: 27em; margin: 1.25em; display: flex; flex-direction: column; -webkit-box-shadow: 5px 6px 20px 0px rgba(158, 155, 158, 0.75); -moz-box-shadow: 5px 6px 20px 0px rgba(158, 155, 158, 0.75); box-shadow: 5px 6px 20px 0px rgba(158, 155, 158, 0.75); background: #fff; } @media screen and (max-width: 1920px) { .place { width: 30%; } } @media screen and (min-width: 900px) and (max-width: 1366px) { .place { width: 45%; } } @media screen and (min-width: 768px) and (max-width: 1366px) { .place { width: 44%; } } @media screen and (min-width: 415px) and (max-width: 760px) { .place { width: 90%; } } @media screen and (max-width: 415px) { .place { width: 90%; } } .place_image { width: 100%; height: 14.0625em; background-size: cover !important; background-clip: content-box !important; } .place_description { padding: 0.625em; display: flex; flex-direction: column; flex: auto; background: #fff; } .distance_container p.distance { font-weight: 600; } .place_description p, .place_description a { color: #655e5e; font-weight: 400; margin: 0; } .place_description .place_open p { margin: 0; color: #49b51c; } .place_description i.fa { width: 1.25em; } .place_title { flex: auto; } .place_title h3 { color: #655e5e; font-weight: 600; white-space: nowrap; overflow: hidden; margin: 0; font-size: 1.4em; line-height: 1.3; } @media screen and (max-width: 415px) { .place_title h3 { font-size: 1.2em; } } .rating_container { width: 100%; } .rating_bar { width: 6.875em; height: 1.313em; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png); background-repeat: repeat-x; background-position: 0 0; } .rating { height: 1.313em; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png); background-position: 0 100%; background-repeat: repeat-x; } .place_description .place_location { margin-bottom: 0.625em; } .place .distance_container, .place .vicinity_container, .place .place_phone_container { display: flex; } #load_container { padding: 0.625em 1.250em; text-align: center; } #load i.fa-spin, #load i.fa-check { font-size: 4em; color: #655e5e; } #jquery_placeholder { display: none; width: 100%; } footer { padding: 1.25em; text-align: right; background: #eaeaea; min-height: 3.9em; } img#google { width: 10em; } #error { padding: 1.25em; background: #ec3b3b; } #error p { font-size: 1.2em; margin: 0; color: #fff; text-align: center; } #error i.fa-exclamation-circle { color: #fff; }
<div id="page_wrap"> <header> <a href="/"><h1>Close<span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Range</h1></a> <hr> <section id="refinement"> <form> <section class="form_component" style="display: block;"> <input id="driving" type="radio" name="travelmode" value="Driving" checked=""> <i class="fa fa-car" aria-hidden="true"></i> <input id="walking" type="radio" name="travelmode" value="Walking"> <i class="fa fa-male" aria-hidden="true"></i> </section> <section class="form_component" style="display: block;"> <select id="narrow" disabled=""> <option value="select" selected="" disabled="">Please Select</option> <option value="lodging">Accommodation</option> <option value="accounting">Accountants</option> </select> </section> </form> </section> </header> <section id="content"> <h2>What's around you?</h2> <i class="fa fa-globe" aria-hidden="true"></i> </section> <main id="place_results_wrap"> <section class="place_results"> <script> $(function() { $('.next_page_results').click(function() { // Show a loading icon $('#place_results_wrap').html('' + '<section id="load_container">' + '<section id="load">' + '<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading</span>' + '<section id="status"><p>Please wait...</p></section>' + '</section>'); $('#place_results_wrap').load('/assets/php/places.php?pagetoken=CoQC_gAAAPya4E3ejMDEdorULfAyoCqcxzAWpR4WVqLldIuHC3VAAYJdpVg0VWtsKBpFK6BqXpWbmT1IDZAPXQfYtcvJXU7hGVSyb5z1tXnyqOdNaywYf_5WKQ0wiIJ2bEKy97n4EcEt8_VbBLo2rTtDvJC56LrV8zAannMVA46sMj-zeSgsbR9UVL0FEXmLuV2352UoxzyqVK6sdAR_d9SOb3cPOnz-ub2x59O9GkhrdgI7XpW8TkVxefnD-gN_1r76XS9f7ksj8kXSG0jVsMdH23jJM5LWzrXgLJyk7rTdpVceUm6K-fPeYSN505OsjXXa5ETk5EM7pkFSuIQSZUckMUiFxNwSEPe2IXhDYoAv3KKhI6-Z2UEaFLB-suVCCxvLVjGkFA7jYGq0kIs_'); }); }); </script> <section class="next_page"> <button type="button" class="next_page_results">Next Page</button> </section> <section class="place"> <a href="http://www.fieldviewtetbury.co.uk/" target="_blank"> <section class="place_image" style="background: url(https://lh6.googleusercontent.com/-gPVdM_Uq5Xc/UpT6-5Nr9rI/AAAAAAAAAEU/U-OwCkje10Ej1W9M9O11uC16uKmTZUD9Q/s1600-w400/) 50% 50% no-repeat"> <!-- Place Image --> </section> </a> <section class="place_description"> <section class="place_title"> <h3>Field View</h3> </section> <section class="place_location"> <a href="https://maps.google.com/?cid=8031294310008887506" target="_blank"> <section class="distance_container"> <p><i class="fa fa-location-arrow" aria-hidden="true"></i> </p> <p class="distance">108 ft (1 min)</p> </section> <section class="vicinity_container"> <p><i class="fa fa-map-marker" aria-hidden="true"></i> </p> <p>Tetbury</p> </section> </a> </section> <section class="place_phone_container"> <p><i class="fa fa-phone" aria-hidden="true"></i> </p> <p><a href="tel:07811176898">07811 176898</a> </p> </section> </section> </section> <section class="place"> <a href="#" target="_blank"> <section class="place_image" style="background: url(https://lh3.googleusercontent.com/-SBH6UXR36Ig/VSy_S1CIqnI/AAAAAAAAYqQ/fjmjFn7lu_4ACVcjvl0PkG-NYblAmXzUw/s1600-w400/) 50% 50% no-repeat"> <!-- Place Image --> </section> </a> <section class="place_description"> <section class="place_title"> <h3>Place</h3> <section class="rating_container"> <section class="rating_bar"> <section class="rating" style="width:80%"> </section> </section> </section> </section> <section class="place_location"> <a href="#" target="_blank"> <section class="distance_container"> <p><i class="fa fa-location-arrow" aria-hidden="true"></i> </p> <p class="distance">0.5 mi (3 mins)</p> </section> <section class="vicinity_container"> <p><i class="fa fa-map-marker" aria-hidden="true"></i> </p> </section> </a> </section> <section class="place_phone_container"> <p><i class="fa fa-phone" aria-hidden="true"></i> </p> </section> </section> </section> <section class="place"> <a href="#" target="_blank"> <section class="place_image" style="background: url(https://lh3.googleusercontent.com/-SBH6UXR36Ig/VSy_S1CIqnI/AAAAAAAAYqQ/fjmjFn7lu_4ACVcjvl0PkG-NYblAmXzUw/s1600-w400/) 50% 50% no-repeat"> <!-- Place Image --> </section> </a> <section class="place_description"> <section class="place_title"> <h3>Place</h3> <section class="rating_container"> <section class="rating_bar"> <section class="rating" style="width:80%"> </section> </section> </section> </section> <section class="place_location"> <a href="#" target="_blank"> <section class="distance_container"> <p><i class="fa fa-location-arrow" aria-hidden="true"></i> </p> <p class="distance">0.5 mi (3 mins)</p> </section> <section class="vicinity_container"> <p><i class="fa fa-map-marker" aria-hidden="true"></i> </p> </section> </a> </section> <section class="place_phone_container"> <p><i class="fa fa-phone" aria-hidden="true"></i> </p> </section> </section> </section> <section class="place"> <a href="#" target="_blank"> <section class="place_image" style="background: url(https://lh3.googleusercontent.com/-SBH6UXR36Ig/VSy_S1CIqnI/AAAAAAAAYqQ/fjmjFn7lu_4ACVcjvl0PkG-NYblAmXzUw/s1600-w400/) 50% 50% no-repeat"> <!-- Place Image --> </section> </a> <section class="place_description"> <section class="place_title"> <h3>Place</h3> <section class="rating_container"> <section class="rating_bar"> <section class="rating" style="width:80%"> </section> </section> </section> </section> <section class="place_location"> <a href="#" target="_blank"> <section class="distance_container"> <p><i class="fa fa-location-arrow" aria-hidden="true"></i> </p> <p class="distance">0.5 mi (3 mins)</p> </section> <section class="vicinity_container"> <p><i class="fa fa-map-marker" aria-hidden="true"></i> </p> </section> </a> </section> <section class="place_phone_container"> <p><i class="fa fa-phone" aria-hidden="true"></i> </p> </section> </section> </section> <section class="place"> <a href="#" target="_blank"> <section class="place_image" style="background: url(https://lh3.googleusercontent.com/-SBH6UXR36Ig/VSy_S1CIqnI/AAAAAAAAYqQ/fjmjFn7lu_4ACVcjvl0PkG-NYblAmXzUw/s1600-w400/) 50% 50% no-repeat"> <!-- Place Image --> </section> </a> <section class="place_description"> <section class="place_title"> <h3>Place</h3> <section class="rating_container"> <section class="rating_bar"> <section class="rating" style="width:80%"> </section> </section> </section> </section> <section class="place_location"> <a href="#" target="_blank"> <section class="distance_container"> <p><i class="fa fa-location-arrow" aria-hidden="true"></i> </p> <p class="distance">0.5 mi (3 mins)</p> </section> <section class="vicinity_container"> <p><i class="fa fa-map-marker" aria-hidden="true"></i> </p> </section> </a> </section> <section class="place_phone_container"> <p><i class="fa fa-phone" aria-hidden="true"></i> </p> </section> </section> </section> <section class="place"> <a href="#" target="_blank"> <section class="place_image" style="background: url(https://lh3.googleusercontent.com/-SBH6UXR36Ig/VSy_S1CIqnI/AAAAAAAAYqQ/fjmjFn7lu_4ACVcjvl0PkG-NYblAmXzUw/s1600-w400/) 50% 50% no-repeat"> <!-- Place Image --> </section> </a> <section class="place_description"> <section class="place_title"> <h3>Place</h3> <section class="rating_container"> <section class="rating_bar"> <section class="rating" style="width:80%"> </section> </section> </section> </section> <section class="place_location"> <a href="#" target="_blank"> <section class="distance_container"> <p><i class="fa fa-location-arrow" aria-hidden="true"></i> </p> <p class="distance">0.5 mi (3 mins)</p> </section> <section class="vicinity_container"> <p><i class="fa fa-map-marker" aria-hidden="true"></i> </p> </section> </a> </section> <section class="place_phone_container"> <p><i class="fa fa-phone" aria-hidden="true"></i> </p> </section> </section> </section> <section class="place"> <a href="#" target="_blank"> <section class="place_image" style="background: url(https://lh3.googleusercontent.com/-SBH6UXR36Ig/VSy_S1CIqnI/AAAAAAAAYqQ/fjmjFn7lu_4ACVcjvl0PkG-NYblAmXzUw/s1600-w400/) 50% 50% no-repeat"> <!-- Place Image --> </section> </a> <section class="place_description"> <section class="place_title"> <h3>Place</h3> <section class="rating_container"> <section class="rating_bar"> <section class="rating" style="width:80%"> </section> </section> </section> </section> <section class="place_location"> <a href="#" target="_blank"> <section class="distance_container"> <p><i class="fa fa-location-arrow" aria-hidden="true"></i> </p> <p class="distance">0.5 mi (3 mins)</p> </section> <section class="vicinity_container"> <p><i class="fa fa-map-marker" aria-hidden="true"></i> </p> </section> </a> </section> <section class="place_phone_container"> <p><i class="fa fa-phone" aria-hidden="true"></i> </p> </section> </section> </section> <section class="place"> <a href="#" target="_blank"> <section class="place_image" style="background: url(https://lh3.googleusercontent.com/-SBH6UXR36Ig/VSy_S1CIqnI/AAAAAAAAYqQ/fjmjFn7lu_4ACVcjvl0PkG-NYblAmXzUw/s1600-w400/) 50% 50% no-repeat"> <!-- Place Image --> </section> </a> <section class="place_description"> <section class="place_title"> <h3>Place</h3> <section class="rating_container"> <section class="rating_bar"> <section class="rating" style="width:80%"> </section> </section> </section> </section> <section class="place_location"> <a href="#" target="_blank"> <section class="distance_container"> <p><i class="fa fa-location-arrow" aria-hidden="true"></i> </p> <p class="distance">0.5 mi (3 mins)</p> </section> <section class="vicinity_container"> <p><i class="fa fa-map-marker" aria-hidden="true"></i> </p> </section> </a> </section> <section class="place_phone_container"> <p><i class="fa fa-phone" aria-hidden="true"></i> </p> </section> </section> </section> <section class="place"> <a href="#" target="_blank"> <section class="place_image" style="background: url(https://lh3.googleusercontent.com/-SBH6UXR36Ig/VSy_S1CIqnI/AAAAAAAAYqQ/fjmjFn7lu_4ACVcjvl0PkG-NYblAmXzUw/s1600-w400/) 50% 50% no-repeat"> <!-- Place Image --> </section> </a> <section class="place_description"> <section class="place_title"> <h3>Place</h3> <section class="rating_container"> <section class="rating_bar"> <section class="rating" style="width:80%"> </section> </section> </section> </section> <section class="place_location"> <a href="#" target="_blank"> <section class="distance_container"> <p><i class="fa fa-location-arrow" aria-hidden="true"></i> </p> <p class="distance">0.5 mi (3 mins)</p> </section> <section class="vicinity_container"> <p><i class="fa fa-map-marker" aria-hidden="true"></i> </p> </section> </a> </section> <section class="place_phone_container"> <p><i class="fa fa-phone" aria-hidden="true"></i> </p> </section> </section> </section> <section class="place"> <a href="#" target="_blank"> <section class="place_image" style="background: url(https://lh3.googleusercontent.com/-SBH6UXR36Ig/VSy_S1CIqnI/AAAAAAAAYqQ/fjmjFn7lu_4ACVcjvl0PkG-NYblAmXzUw/s1600-w400/) 50% 50% no-repeat"> <!-- Place Image --> </section> </a> <section class="place_description"> <section class="place_title"> <h3>Place</h3> <section class="rating_container"> <section class="rating_bar"> <section class="rating" style="width:80%"> </section> </section> </section> </section> <section class="place_location"> <a href="#" target="_blank"> <section class="distance_container"> <p><i class="fa fa-location-arrow" aria-hidden="true"></i> </p> <p class="distance">0.5 mi (3 mins)</p> </section> <section class="vicinity_container"> <p><i class="fa fa-map-marker" aria-hidden="true"></i> </p> </section> </a> </section> <section class="place_phone_container"> <p><i class="fa fa-phone" aria-hidden="true"></i> </p> </section> </section> </section> <section class="place"> <a href="#" target="_blank"> <section class="place_image" style="background: url(https://lh3.googleusercontent.com/-SBH6UXR36Ig/VSy_S1CIqnI/AAAAAAAAYqQ/fjmjFn7lu_4ACVcjvl0PkG-NYblAmXzUw/s1600-w400/) 50% 50% no-repeat"> <!-- Place Image --> </section> </a> <section class="place_description"> <section class="place_title"> <h3>Place</h3> <section class="rating_container"> <section class="rating_bar"> <section class="rating" style="width:80%"> </section> </section> </section> </section> <section class="place_location"> <a href="#" target="_blank"> <section class="distance_container"> <p><i class="fa fa-location-arrow" aria-hidden="true"></i> </p> <p class="distance">0.5 mi (3 mins)</p> </section> <section class="vicinity_container"> <p><i class="fa fa-map-marker" aria-hidden="true"></i> </p> </section> </a> </section> <section class="place_phone_container"> <p><i class="fa fa-phone" aria-hidden="true"></i> </p> </section> </section> </section> </section> </main> <footer class="footer"> <img id="google" src="/assets/i/google.png" alt="Powered by Google"> </footer> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script async="" src="https://www.google-analytics.com/analytics.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="/assets/js/ga.js"></script> <script src="/assets/js/bootstrap.min.js"></script> <script src="/assets/js/main.js"></script> <script src="/assets/js/geo.js"></script> </div> </body> </html>
3 个解决方案
解决方案1
2 已采纳 2016-08-28 23:28:54
You have this in your code: 你的代码中有这个：
html, body {
height: 100%;
}
That essentially limits the primary containers to 100% height of the viewport. 这实质上将主容器限制为视口的100％高度。
Because of the way percentage heights work , it's a bit messy and complicated to get them to work with min-height . 由于百分比高度的工作方式 ，使它们与min-height一起工作有点混乱和复杂。
Instead of percentage heights consider viewport percentages . 而不是百分比高度考虑视口百分比 。 Remove the code above and add this: 删除上面的代码并添加：
body {
min-height: 100vh;
}
From the spec: 从规格：
5.1.2.
vw,vh,vmin,vmaxunitsvw，vh，vmin，vmax单位The viewport-percentage lengths are relative to the size of the initial containing block.
- vw unit - Equal to 1% of the width of the initial containing block.
- vh unit - Equal to 1% of the height of the initial containing block.
- vmin unit - Equal to the smaller of
vworvh.vw或vh较小的单位 。- vmax unit - Equal to the larger of
vworvh.vw或vh的较大者。
解决方案2
1 2016-08-29 01:08:42
do you need a footer example? 你需要一个页脚示例吗？
why you declare html to 100% makes no sense mate 为什么你声明html到100％是没有意义的伙伴
instead go for this: 而是为此：
#body{ height: 100%; }
if you want to add a footer things are totally different 如果你想添加一个页脚的东西是完全不同的
So just let me know 所以请告诉我
cheers 干杯
scriptmind.js scriptmind.js
解决方案3
0 2016-08-29 00:28:42
For body,height set 100% is invalid.you can use JQuery test,To the fllowinng code： 对于正文，高度设置100％无效。您可以使用JQuery测试，对于fllowinng代码：
$(document).ready(function()
{
alert($("body").css("height"));
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
正文HTML高度100％ - body HTML height 100%
html，身高100％ - html, body height 100%
HTML和身高不是100％ - Html and body height are not 100%
HTML-身高不是100％ - HTML - Body height not 100%
将HTML和正文的高度设置为100％ - Set height 100% to html and body
HTML的缺点＆身高100％？ - Downside of html & body height 100%?
高度为100％的html，body和div - html, body and divs with height 100%
html和正文的高度不是100％ - html and body's height is not 100%
height: 100% 或 min-height: 100% 用于 html 和 body 元素？ - height: 100% or min-height: 100% for html and body elements?
100％的高度无法使用背景（尽管html和主体高度为100％） - 100% height for background not working (despite html and body height 100%)
相关标签