并且不尊重100％的身高

时间：2016-08-28 23:19:09

标签： html css height

我最近一直没有达到高峰问题。

我设法使用flex:auto和flex-shrink:0来解决某些元素的高度。

我无法获取HTML和Body标签来播放球（在滚动线后的元素检查器中可见。）

我将html和正文高度指定为100％，因为主页不会超出浏览器窗口，我需要将页脚推到底部并填充空格。

我怀疑这可能是我在页面内容超出浏览器窗口时遇到问题的原因。

请有人建议吗？

这是我目前的尝试：

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

JSFiddle

3 个答案:

答案 0 :(得分：2)

你的代码中有这个：

html, body {
    height: 100%;
}

这实质上将主容器限制为视口的100％高度。

由于the way percentage heights work，让它们与min-height一起使用会有点混乱和复杂。

而不是百分比高度考虑视口百分比。删除上面的代码并添加：

body {
    min-height: 100vh;
}

revised fiddle

来自规范：

  

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

     

视口百分比长度是相对于的大小   初始包含块。当初始的高度或宽度   包含块被更改，它们会相应缩放。

     
      
  • vw unit - 等于初始包含块宽度的1％。
    •   
  • vh单位 - 等于初始包含高度的1％   块。
    •   
  • vmin unit - 等于vw或vh中的较小者。
    •   
  • vmax单位 - 等于vw或vh中的较大者。
    •   

答案 1 :(得分：1)

你需要一个页脚示例吗？

为什么你宣布html为100％没有意义的伴侣

改为：

#body{ height: 100%; }

如果你想添加一个页脚的东西是完全不同的

所以请让我知道

欢呼声

scriptmind.js

答案 2 :(得分：0)

对于正文，高度设置100％无效。您可以使用JQuery测试，以fllowinng代码：

index = np.asarray(np.where(a == 1)).T
相关问题
最新问题