css - <html> and <body> not respecting 100% height -
i've been having no-end of issues heights of late.
i managed solve heights of elements flex:auto , flex-shrink:0.
i can't html , body tags play ball (visible in element inspector after scroll line.)
i have html , body height specified 100% due fact homepage doesn't exceed browser window , need push footer bottom , fill space.
i suspect though potentially cause of me experiencing issues when page content exceeds browser window.
please advise?
here 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 , (min-width: 605px) , (max-width: 900px) { header h1 { font-size: 3.5em; } } @media screen , (min-width: 340px) , (max-width: 605px) { header h1 { font-size: 3em; } } @media screen , (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 , (max-width: 900px) { #content { display: none; } } #content h2 { color: #fff; font-weight: 400; font-size: 3em; margin: 0; } @media screen , (max-width: 415px) { #content h2 { font-size: 2em; } } #content i.fa-globe { font-size: 14em; color: #fff; } @media screen , (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 , (max-width: 1920px) { .place { width: 30%; } } @media screen , (min-width: 900px) , (max-width: 1366px) { .place { width: 45%; } } @media screen , (min-width: 768px) , (max-width: 1366px) { .place { width: 44%; } } @media screen , (min-width: 415px) , (max-width: 760px) { .place { width: 90%; } } @media screen , (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 { 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 , (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 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 google"> </footer> <!-- jquery (necessary 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 compiled plugins (below), or include individual files 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>
you have in code:
html, body { height: 100%; } that limits primary containers 100% height of viewport.
because of the way percentage heights work, it's bit messy , complicated them work min-height.
instead of percentage heights consider viewport percentages. remove code above , add this:
body { min-height: 100vh; } from spec:
5.1.2. viewport-percentage lengths:
vw,vh,vmin,vmaxunitsthe viewport-percentage lengths relative size of initial containing block. when height or width of initial containing block changed, scaled accordingly.
- vw unit - equal 1% of width of initial containing block.
- vh unit - equal 1% of height of initial containing block.
- vmin unit - equal smaller of
vworvh.- vmax unit - equal larger of
vworvh.
Comments
Post a Comment