CODEWITHSUNDEEP
htmlcssheight
mmotti
mmotti

Reputation: 341

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

I just can't get the HTML and Body tags to play ball (visible in element inspector after scroll line.)

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.

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>
            &nbsp;
            <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>

JSFiddle

Upvotes: 1

Views: 1016

Answers (3)

scriptmind.js
scriptmind.js

Reputation: 9

do you need a footer example?

why you declare html to 100% makes no sense mate

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

Upvotes: 1

遁地龙卷风
遁地龙卷风

Reputation: 40

For body,height set 100% is invalid.you can use JQuery test,To the fllowinng code：

$(document).ready(function()

    {
        alert($("body").css("height"));

    })

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 370993

You have this in your code:

html, body {
    height: 100%;
}

That essentially limits the primary containers to 100% height of the viewport.

Because of the way percentage heights work, it's a bit messy and complicated to get them to work with min-height.

Instead of percentage heights consider viewport percentages. Remove the code above and add this:

body {
    min-height: 100vh;
}

revised fiddle

From the spec:

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

  • 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 vw or vh.
  • vmax unit - Equal to the larger of vw or vh.

Upvotes: 2

Related Questions