overflow-x: hidden 隐藏页脚行

Question

我网站的导航栏在移动设备上扩展到右侧：

截图： https://prnt.sc/qsze7o - 导航栏 https://prnt.sc/qszeer - 页脚

我用以下代码更新了我的 CSS 以使其响应：

html{overflow-x:hidden;} 
body{overflow-x:hidden;}

它可以正常工作并修复移动设备的导航栏，但它隐藏了页脚的第一行，如下所示。请提出任何解决方案。

之后的截图 https://prnt.sc/qszelc - 导航栏 https://prnt.sc/qszeow - 页脚

Header.js

 <HeaderWrapper>
      <div className="container-fluid">
        <div className="row">
         <div className="col-md-2">
         <Link to="/">
              <img src={tangoLogo} alt={site.siteMetadata.title} />
            </Link>
          </div>

          <div className="col-md-10 menu">
            <Navigation menu={menu} />
          </div>
        </div>
      </div>
    </HeaderWrapper>

HeaderStyles.js

import styled from 'styled-components';

export const HeaderWrapper = styled.header`
  background: #fff;
  margin-bottom: 1.45rem;
  height: 110px;
  border-bottom: 1px solid #e7e7e7;
  display: flex;
  align-items: center;
  position: fixed;
  z-index: 999;
  width: 100%;
  -webkit-box-shadow: 0 5px 4px -6px #999;
    -moz-box-shadow: 0 5px 4px -6px #999;
    box-shadow: 0 7px 4px -8px #999;


    @media (min-width: 1200px) {
    img {
        margin:170px!important;
      }
    }

  img {
    max-width: 185px;
    margin: 0;
    padding: 12px 0 0 0;
  }

  .menu {
    display: flex;
    align-items: center;
  }
`;

以上代码用于页眉部分。

Footer.js

 <div className="row">
    <div className="col-md-4"
    data-sal="slide-left"
    data-sal-delay="300"
    data-sal-duration="60s"
    data-sal-easing="ease">
      <h3>PROFESSIONAL ASSISTANCE</h3>
      <p className="expat-contact">Expat Guide Turkey is entity working under structure of ATA Institutional Consultancy. <br/><br/>Expat Guide Turkey is a consultancy firm offering umbrella company services and services on immigration issues including work and residence permit, company formation and property management for foreigners in Turkey. Behind its success, Ata Institutional Consultancy’s efficiency and customer oriented management style plays a very important role. </p>          
  </div>

    <div className="col-md-1"><br/></div>
    <div className="col-md-7"
    data-sal="slide-left"
    data-sal-delay="400"
    data-sal-duration="60s"
    data-sal-easing="ease">
      <h3>GET IN TOUCH</h3>
        <form 
        name="contact" 
        method="POST" 
        action="/success/" 
        data-netlify="true"
        data-netlify-honeypot="bot-field" 
        class="needs-validation"
        novalidate netlify
        >

        <div className="half left cf">
          <input type="hidden" name="form-name" value="contact" />
          <input type="text" name="name" id="input-name" class="form-control" placeholder="Your Name" required /> 
          <input type="email" name="email" id="input-email" class="form-control" placeholder="Email address" title="Email (format: your@example.com)" required  />
          <div className="invalid-feedback">
            Please enter a valid email address.
          </div>
          <input id="phonenum" type="tel" class="form-control" pattern="^\d{4}-\d{3}-\d{4}$" placeholder="Phone Number (xxxx-xxx-xxxx)"  title="Phone (format: xxxx-xxx-xxxx)" required />
        </div>
        <div className="half right cf">
        <textarea name="message" id="input-message" rows="4" class="form-control"  placeholder="Message"></textarea>
        </div>
        <div netlify-recaptcha></div>
        <input
        type='submit' id="input-submit" class="btn btn-primary btn-lg btn-block" value="Send Message"
        />
        </form>
        </div>
    </div>    
</div>

FooterStyles.js

import styled from 'styled-components';

export const FooterWrapper = styled.footer`
  background: #f3f3f3;
  color: #4c4c4c;
  text-align: left;
  padding: 40px 0 10px 0;


  h1 {
    font-family: 'Raleway', Arial;
    color: #4c4c4c;
    text-align: left;
    font-size: 25px;
    margin-left: 0px;
  }

  h3 {
    font-family: 'Raleway', Arial;
    font-size: 16px;
    margin-top: 5px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 0.9rem;
  }


  h6 {
    font-family: 'Times New Roman';
    font-size: 28px;
    color: #fff;
    font-style: italic;
    margin: 40px 20% 20px 20%;
    line-height: 35px;
  }

  h6:before{
    content: "";
    background: #d22e;
    width: 40px;
    height: 4px;
    position: absolute;
    bottom: 10px;
  }


  a {
    text-decoration: none;
    color: #d22e;
    font-weight: 200;
    font-family: Arial, Helvetica, sans-serif;
  }

  .icon_social {
    text-decoration: none;
    display: inline-block;
    margin: 0.6rem 1.2rem 1rem 0;
    opacity: 0.5;
    width: 1.4rem;
    height: 1.4rem;
  }

  .social {
    text-align: left;
    display: block;
    margin: 5px 0px; 
  }

  .social img {
    width: 1.2rem;
    height: auto;
    margin: 0 5px 0 0;
    position: relative;
    align-items: left;
    opacity: 0.5;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    filter: invert(60%) sepia(33%) saturate(2000%) hue-rotate(322deg) brightness(100%) contrast(120%);
  }

  .expat-contact {
    font-size: 12px;
    font-weight: 400;
    font-family: Raleway, Arial;
    line-height: 1.2rem;
  }

  .expat-heading {

    font-size: 25px;
    font-family: Raleway, Arial;
    line-height: 1rem;
    text-align: left;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;

     }

.expat-heading:before{
  content: "";
  background: #d22e;
  width: 40px;
  height: 4px;
  position: absolute;
  bottom: 6px;
}

  .social img:hover {
    opacity: 0.9;
    cursor: pointer;
  }

  .linkedin {
    margin-right: 5px;
    filter: invert(36%) sepia(73%) saturate(2157%) hue-rotate(344deg) brightness(77%) contrast(99%);
  -webkit-filter:invert(60%);
    }

  .facebook {
    margin-left: 5px;
    filter: invert(60%); 
  -webkit-filter:invert(60%);
  }

  .instagram {
    margin-left: 5px;
    filter: invert(60%); 
  -webkit-filter:invert(60%); 
  }

  .border-top { border-top: 1px solid #e5e5e5; }
  .border-bottom { border-bottom: 1px solid #e5e5e5; }
  .border-top-gray { border-top-color: #adb5bd; }

  .box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

  .lh-condensed { line-height: 1.25; }

  `;

如果我在 layout.css

中使用 html,body{overflow-x:hidden}，则页脚中的上一行会隐藏在移动视图中

Answer 1

在不显示您的代码的情况下，我只能说 - overflow-x:hidden 不是响应式解决方案。您需要使容器的宽度和内容适应并更改 @madia。

Answer 2

Footer.js 中的以下代码造成的问题，其中我使用了 slide-left css 动画：

<div className="col-md-4"
    data-sal="slide-left"
    data-sal-delay="300"
    data-sal-duration="60s"
    data-sal-easing="ease">
</div>

将其更改为 slide-up 后，问题已解决，移动设备上的 header 栏没有向右侧延伸：

<div className="col-md-4"
    data-sal="slide-up"
    data-sal-delay="300"
    data-sal-duration="60s"
    data-sal-easing="ease">
</div>

overflow-x: hidden 隐藏页脚行

overflow-x: hidden hides footer row

css

mobile-devices

responsive