堆栈内存溢出
  简体   繁体   English

height:auto 导致移动设备底部出现空白

[英]height:auto causes white space at the bottom in mobile devices

 原文  2020-05-12 17:37:00  0   2    javascript/ html/ jquery/ css/ twitter-bootstrap

问题描述

html code html代码

<nav>...</nav>
<div class="bg">
      <div class="outer-box">
        <div class="inner-box">
          <div class="dev-image">
            <img
              src="img/ronak-dev-ux-ui-design-project-image@3x.webp"
              alt="Profile Picture"
            />
          </div>
          <div class="dev-name">Ronak Radadiya</div>
          <div class="dev-profession">Lorem Ipsum</div>
          <div class="dev-content">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi sed cumque voluptatem repudiandae illo dolor nihil, ducimus eaque voluptatibus ex perspiciatis deleniti corrupti repellendus reiciendis rem expedita laudantium, velit dicta?
          </div>
          <div class="reach">
            <img
              src="img/ronak-dev-ux-ui-design-line@3x.webp"
              alt="Reach out"
            />
            <p>Reach Out to me</p>
            <img
              src="img/ronak-dev-ux-ui-design-line@3x.webp"
              alt="Reach out"
            />
          </div>
          <div class="social-icons">
            <a
              href="#"
              target="_blank"
            >
              <img
                src="img/ronak-whatsapp-product-ui-ux-design@3x.webp"
                alt="whatsapp"
              />
            </a>

            <a href="https://github.com/ronakradadiya" target="_blank">
              <img
                src="img/ronak-github-product-ui-ux-design@3x.webp"
                alt="github"
              />
            </a>

            <a
              href="https://www.linkedin.com/in/ronak-radadiya-506861167"
              target="_blank"
            >
              <img
                src="img/ronak-linkedin-product-ui-ux-design@3x.webp"
                alt="Linkedin"
              />
            </a>

            <a href="https://twitter.com/ronakradadiya98" target="_blank">
              <img
                src="img/ronak-twitter-product-ui-ux-design@3x.webp"
                alt="twitter"
              />
            </a>
          </div>
        </div>
      </div>
    </div>
<footer>... </footer>

css code css代码

html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Navbar */

.actives {
  color: #ff4060 !important;
}

.active {
  color: #ff4060 !important;
}

nav.bg-dark {
  background-color: var(--main-bg1-color) !important;
  height: 53px !important;
}

nav.shadow {
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5) !important;
  -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5) !important;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5) !important;
}

nav .nav-color {
  color: var(--main-text-color) !important;
}

nav .navbar-nav .nav-link {
  font-family: ProximaNovaA;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.35px;
  margin: 0rem 0.6rem;
}

/* Introduction */

.bg {
  height: calc(100% - 117px);
  width: 100%;
  background-color: var(--main-bg2-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.fixedHeight {
  height: 507px;
}

.autoHeightBody {
  height: auto;
}

.autoHeightBg {
  height: auto;
}

.outer-box {
  max-width: 700px;
  width: 100%;
  border-radius: 4px;
  background-color: var(--main-bg1-color);
  padding: 12px;
  margin: 20px;
}

.inner-box {
  width: 100%;
  border-radius: 4px;
}

.dev-image {
  max-width: 96px;
  max-height: 96px;
  margin-top: 26px;
  margin-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
}

.dev-image img {
  width: 100%;
  height: 100%;
}

.dev-name {
  font-family: Roboto;
  font-size: 30px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 1.24px;
  color: #ffffff;
  text-align: center;
  margin-bottom: 12px;
}

.dev-profession {
  font-family: Roboto;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.58px;
  color: #ff4060;
  text-align: center;
  margin-bottom: 24px;
}

.dev-content {
  max-width: 545px;
  width: 100%;
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.4px;
  text-align: center;
  color: #aeaeae;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 32px;
}

.reach {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}

.reach img {
  max-width: 150px;
  width: 100%;
  height: 1px;
}

.reach img:nth-child(1) {
  margin-right: 15px;
}

.reach p {
  font-family: Roboto;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.35px;
  text-align: center;
  color: #ffffff;
  margin-bottom: 0;
  margin-right: 15px;
}

.social-icons {
  display: flex;
  justify-content: center;
  margin-bottom: 41px;
}

.social-icons img {
  width: 24px;
  height: 24px;
}

.social-icons img:nth-child(1),
.social-icons img:nth-child(2),
.social-icons img:nth-child(3) {
  margin-right: 32px;
}

.footer {
  background-color: #111111;
  height: 64px;
  display: flex;
  align-items: center;
}

.footer-adjust {
  display: flex;
  justify-content: space-between;
}

.footer-left-content p {
  font-family: Roboto;
  font-size: 14px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.35px;
  color: #aeaeae;
  margin-bottom: 0;
  padding-top: 4px;
}

.footer-right-content {
  display: flex;
}

.footer-right-content div a {
  font-family: Roboto;
  font-size: 14px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.35px;
  color: #aeaeae;
  text-decoration: none;
}

.footer-right-content div:nth-child(1) a,
.footer-right-content div:nth-child(2) a {
  margin-right: 40px;
}

@media (min-width: 576px) and (max-width: 767px) {
  .bg {
    height: calc(100% - 161px);
  }

  .outer-box {
    min-height: 507px;
  }

  .footer {
    height: 108px !important;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .footer,
  .footer-adjust {
    display: block !important;
  }

  .footer-left-content p {
    text-align: center;
    margin-bottom: 16px;
  }

  .footer-right-content {
    justify-content: center;
  }
}

@media (min-width: 0px) and (max-width: 575px) {
  .bg {
    height: calc(100% - 161px);
  }

  .outer-box {
    min-height: 507px;
  }

  .reach img {
    width: 50px;
    height: 1px;
  }

  .footer {
    height: 108px !important;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .footer-right-content div:nth-child(1) a,
  .footer-right-content div:nth-child(2) a {
    margin-right: 30px;
  }

  .footer,
  .footer-adjust {
    display: block !important;
  }

  .footer-left-content p {
    text-align: center;
    margin-bottom: 16px;
  }

  .footer-right-content {
    justify-content: center;
  }
}

JS code JS代码

let styleBgBox = parseInt($(".bg").css("height"));
let styleOuterBox = parseInt($(".outer-box").css("height"));

if ($(window).outerWidth() >= 768) {
  $(".outer-box").addClass("fixedHeight");
} else {
  $(".outer-box").removeClass("fixedHeight");
}

if (styleBgBox < 547 && styleOuterBox == 507) {
  $("body").addClass("autoHeightBody");
  $(".bg").addClass("autoHeightBg");
} else if (styleBgBox > 547 && styleOuterBox > 507) {
  $("body").addClass("autoHeightBody");
  $(".bg").addClass("autoHeightBg");
} else if (styleBgBox < 547 && styleOuterBox > 507) {
  $("body").addClass("autoHeightBody");
  $(".bg").addClass("autoHeightBg");
} else {
  $("body").removeClass("autoHeightBody");
  $(".bg").removeClass("autoHeightBg");
}

$(window).resize(function () {
  if ($(window).outerWidth() >= 768) {
    $(".outer-box").addClass("fixedHeight");
  } else {
    $(".outer-box").removeClass("fixedHeight");
  }

  styleBgBox = parseInt($(".bg").css("height"));
  styleOuterBox = parseInt($(".outer-box").css("height"));
  if (styleBgBox < 547 && styleOuterBox == 507) {
    $("body").addClass("autoHeightBody");
    $(".bg").addClass("autoHeightBg");
  } else if (styleBgBox > 547 && styleOuterBox > 507) {
    $("body").addClass("autoHeightBody");
    $(".bg").addClass("autoHeightBg");
  } else if (styleBgBox < 547 && styleOuterBox > 507) {
    $("body").addClass("autoHeightBody");
    $(".bg").addClass("autoHeightBg");
  } else {
    $("body").removeClass("autoHeightBody");
    $(".bg").removeClass("autoHeightBg");
  }
});

When I replace the existing height which is calculated using calc() with height:auto, a white space at the bottom appears when viewed in mobile devices.当我将使用 calc() 计算的现有高度替换为 height:auto 时，在移动设备中查看时底部会出现一个空白。 Is there any alternative to height:auto to be used in the code.代码中是否可以使用 height:auto 的替代方法。 I tried using vh instead of %, using overflow property, but it didn't work?我尝试使用溢出属性而不是 %，但它不起作用？

2 个解决方案

解决方案1
 1 已采纳  2020-05-12 18:03:34

These two are the problem这两个是问题

html {height: 100%;}
body {height: 100%;}

100% height of html and body is a heigh of a viewport, and not a whole document. html 和 body 的 100% 高度是视口的高度，而不是整个文档。 Inner elements made the common height more then viewport and it could make the whitspases you are taking about.内部元素使公共高度超过视口，它可以使您正在考虑的问题。

UPDATED更新

Remove your custom script at all.完全删除您的自定义script 。 I will write down only CSS classes, i made changes in. Replace and it will work.我将只写下 CSS 类，我进行了更改。替换它会起作用。

html {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  position: relative;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: #111111;
}
nav.bg-dark {
    background-color: var(--main-bg1-color) !important;
    height: 53px !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2;
}
.bg {
    min-height: 100vh;
    padding: 53px 0 60px 0;
    box-sizing: border-box;
    width: 100%;
    background-color: var(--main-bg2-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    position: relative;
}
.footer {
    background-color: #111111;
    height: 64px;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 2;
}
@media (min-width: 576px) and (max-width: 767px) {
  .bg {
    padding: 53px 0 156px 0;
  }
}

@media (min-width: 0px) and (max-width: 575px) {
  .bg {
    padding: 53px 0 156px 0;
  }  
}

解决方案2
 -1  2020-05-12 18:53:51

Remove height attribute from each .bg in the css portion (I counted 3 total).从 css 部分中的每个.bg中删除height属性（我总共数了 3 个）。 Also remove min-height: 507px;同时删除min-height: 507px; from both .outer-box in css.来自 css 中的两个.outer-box 。

Change your html and body css to read as follows.将您的html和body css 更改为如下所示。 This will ensure your elements are encompassed by your body tag, and body by html tag:这将确保您的元素包含在您的 body 标签中，并且 body 包含在 html 标签中：

html,body{
  margin: 0;
  padding: 0;
}

I tried your code with the modifications I mentioned, with and without your JS, and it didn't seem to make a difference.我用我提到的修改尝试了你的代码，有和没有你的 JS，它似乎没有任何区别。 It doesn't seem like your JS is really required if you use the modification to css and are wanting to remove the white space at bottom of your page.如果您使用对 css 的修改并且想要删除页面底部的空白区域，那么您的 JS 似乎并不真正需要。 See JSFiddle https://jsfiddle.net/s97htk0p/见 JSFiddle https://jsfiddle.net/s97htk0p/

Your modified CSS code:您修改后的 CSS 代码：

html,body{

  margin: 0;
  padding: 0;
}
/* Navbar */

.actives {
  color: #ff4060 !important;
}

.active {
  color: #ff4060 !important;
}

nav.bg-dark {
  background-color: var(--main-bg1-color) !important;
  height: 53px !important;
}

nav.shadow {
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5) !important;
  -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5) !important;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5) !important;
}

nav .nav-color {
  color: var(--main-text-color) !important;
}

nav .navbar-nav .nav-link {
  font-family: ProximaNovaA;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.35px;
  margin: 0rem 0.6rem;
}

/* Introduction */

.bg {

  width: 100%;
  background-color: var(--main-bg2-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.fixedHeight {
  height: 507px;
}

.autoHeightBody {
  height: auto;
}

.autoHeightBg {
  height: auto;
}

.outer-box {
  max-width: 700px;
  width: 100%;
  border-radius: 4px;
  background-color: var(--main-bg1-color);
  padding: 12px;
  margin: 20px;
}

.inner-box {
  width: 100%;
  border-radius: 4px;
}

.dev-image {
  max-width: 96px;
  max-height: 96px;
  margin-top: 26px;
  margin-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
}

.dev-image img {
  width: 100%;
  height: 100%;
}

.dev-name {
  font-family: Roboto;
  font-size: 30px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 1.24px;
  color: #ffffff;
  text-align: center;
  margin-bottom: 12px;
}

.dev-profession {
  font-family: Roboto;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.58px;
  color: #ff4060;
  text-align: center;
  margin-bottom: 24px;
}

.dev-content {
  max-width: 545px;
  width: 100%;
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.4px;
  text-align: center;
  color: #aeaeae;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 32px;
}

.reach {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}

.reach img {
  max-width: 150px;
  width: 100%;
  height: 1px;
}

.reach img:nth-child(1) {
  margin-right: 15px;
}

.reach p {
  font-family: Roboto;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.35px;
  text-align: center;
  color: #ffffff;
  margin-bottom: 0;
  margin-right: 15px;
}

.social-icons {
  display: flex;
  justify-content: center;
  margin-bottom: 41px;
}

.social-icons img {
  width: 24px;
  height: 24px;
}

.social-icons img:nth-child(1),
.social-icons img:nth-child(2),
.social-icons img:nth-child(3) {
  margin-right: 32px;
}

.footer {
  background-color: #111111;
  height: 64px;
  display: flex;
  align-items: center;
}

.footer-adjust {
  display: flex;
  justify-content: space-between;
}

.footer-left-content p {
  font-family: Roboto;
  font-size: 14px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.35px;
  color: #aeaeae;
  margin-bottom: 0;
  padding-top: 4px;
}

.footer-right-content {
  display: flex;
}

.footer-right-content div a {
  font-family: Roboto;
  font-size: 14px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.35px;
  color: #aeaeae;
  text-decoration: none;
}

.footer-right-content div:nth-child(1) a,
.footer-right-content div:nth-child(2) a {
  margin-right: 40px;
}

@media (min-width: 576px) and (max-width: 767px) {


  .footer {
    height: 108px !important;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .footer,
  .footer-adjust {
    display: block !important;
  }

  .footer-left-content p {
    text-align: center;
    margin-bottom: 16px;
  }

  .footer-right-content {
    justify-content: center;
  }
}

@media (min-width: 0px) and (max-width: 575px) {




  .reach img {
    width: 50px;
    height: 1px;
  }

  .footer {
    height: 108px !important;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .footer-right-content div:nth-child(1) a,
  .footer-right-content div:nth-child(2) a {
    margin-right: 30px;
  }

  .footer,
  .footer-adjust {
    display: block !important;
  }

  .footer-left-content p {
    text-align: center;
    margin-bottom: 16px;
  }

  .footer-right-content {
    justify-content: center;
  }
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 移动设备上模式下方的空白 - White space below modal on mobile devices 在android中使用chrome的移动设备中，当我向下滚动模式并且地址栏消失时，底部出现空白 - In mobile devices using chrome in android, when I scroll down the modal and the address bar disappears, white space appears at the bottom Safari 在移动设备中忽略 img 中的自动高度 - Safari ignore height auto in img in mobile devices jQuery移动Web应用程序在页面底部保留空白 - jquery mobile web app leave empty white space at page bottom 页面底部的空白 - white space at the bottom of page HTML 底部的空白 - White space at bottom of HTML 页面底部的空白 - White Space at bottom of page 在移动设备上禁用Bootstrap 3自动调整大小的轮播（高度） - Disable carousel in Bootstrap 3 auto resize on Mobile devices (Height) 滚动到底部并向上备份后，页面底部会出现空白（移动） - White space appears on bottom of page after scrolling to the bottom and back up (Mobile) 在移动设备中，空白：nowrap; 溢出：隐藏 文字溢出：省略号； 有点不起作用 - in mobile devices, white-space:nowrap; overflow:hidden; text-overflow:ellipsis; kinda do not work
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM