css - 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 - 页脚

页眉.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;
  }
`;

上面的代码用于标题部分。

页脚.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: [e-mail])" 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>

页脚样式.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}，页脚上方的行将隐藏在移动视图中

标签： cssresponsivemobile-devices

Answer 1

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