问我的CSS网格布局会导致水平滚动，我不知道为什么
EN

Stack Overflow用户

提问于 2018-10-04 02:54:23

回答 2查看 2.4K关注 0票数 0

使用CSS网格布局，我的页面在X轴上显示一个轻微的溢出，我删除了网格，然后溢出消失了。当我重置网格时，溢出会重新出现。所以我想知道为什么会发生这种事？

我尝试将最大宽度设置为100vw或更小:不工作。
我试着把页边距设置为零或更少:不起作用
即使溢出-x°作为一种解决方法，也不起作用
我尝试将网格列排水沟设置为0:不起作用
对于React组件，我再次显式地重置了div元素，这个div元素的边距为零，填充为零:不工作。
我尝试将最大宽度为100‘t的grid_container设置为:不工作。
我试图更改span元素中的div :不起作用

事实上，我有两个网格，一个在布局级别，另一个在布局元素级别。在这里，我的现状是：

如你所见，我似乎有两个问题：

溢出上的所有页面宽度空间和secon列。
由于一些奇怪的行为而造成的结构性溢出。

在这里，我的layout.js：

export default ({children, title = 'title' }) => (
    <Provider store={store}> 
        <div className={style.layout}> 
            <Head>
                <title>{ title }</title>
                <meta charSet='utf-8' />
                <meta name='viewport' content='initial-scale=1.0, width=device-width' />
            </Head>
            <HeadComponent/>  
            <div className={style.signature}>
                signature 
            </div>
            <div className={style.social_medias}>
                social_medias 
            </div>
            <div className={style.children}>
                {children} 
            </div>
            <Footer className={style.footer}/>  
        </div>
    </Provider>
)

在这里，我的layout.css：

html, body{ 
    margin : 0;
    width: 100vw;
    height: 100%; 
}
.layout{ 
    width: 100%;
    min-height: 100%; 
    margin:auto;
    text-align: justify;
    text-justify: inter-word;
    display : grid; 
    grid-template-areas:  
                "header   header"
                "signature social_medias"
                "children children"
                "footer   footer" ;
    grid-template-rows: 44px 0.5fr 1fr auto ;
    grid-template-columns: 1fr 1fr; 

}


.centerbar{  
    width: 100vw;
    background-color: orange ;
    display: flex;
    align-items: center;
    justify-content: center;
}

.headbar{ 

    grid-area: header; 
    display :grid ; 
    z-index:170;
    margin: auto; 
    width:100vw; 
    position:fixed;
    align-self: center;
    justify-self: center;
}


.signature{ 
    grid-area: signature;
}
.logo:hover{ 
    color: black;
}


.social_medias{ 
    grid-area: social_medias;
}


/*** children ***/

.children{ 
    background-color: pink;
    grid-area: children; 
    height: 100%;
}


/*** footer ***/ 
/* 
.footer{  
    grid-area: footer; 
    display: grid;
    width: 100vw;  
     margin-top: 10em;  

} */

在这里，我的css文件：

  .footer_grid{   
    grid-area: footer;  
    height: 100vh;    
    max-width: 100vw; 
    padding:0; 
    margin-top: 10vh;
    overflow-x:hidden;
    display:grid;
    grid-template-areas:  
                " let_chat     social_medias"
                " citations    email_form   " ;
    grid-template-columns: 2.5fr 1fr ;
    grid-template-rows: auto auto; 
    background-color: white;  
    border-top: solid; 
    border-width: 1px;
    padding-top: 25px;  
    grid-column-gap: 0;
    background-color: rgb(255, 255, 157);
} 

.let_chat{ 
grid-area: let_chat;
font-family: "Moonlight";
font-size: 90pt;
display : flex; 
justify-content: center; 
align-items: center
}

.social_medias{ 
grid-area: social_medias; 
display : flex; 
justify-content: end; 
align-items: start;
}

.citations{ 
    grid-area: citations; 
}

.email_form{ 
    grid-area: email_form; 
}

在这里，我的React.js文件：

import React from 'react'
import style from "./Footer.css";

export default () => {
  return ( 
      <span className={style.footer_grid}>
              <div className={style.let_chat}>
              let chat
              </div>
              <div className={style.social_medias}>
              social media
              </div>
              <div className={style.citations}>
              citations
              </div>
              <div className={style.email_form}>
              email form
              </div>
      </span> 
  )
}

我想知道是怎么回事。如果有人有任何暗示，那就太好了。

css

reactjs

css-grid

音视频低代码开发方案最快1天上线

推出 TUICallKit 和 TUIRoomKit 低代码集成方案，最快1天接入在线教育、语聊房、在线客服等应用

回答 2

Stack Overflow用户

发布于 2018-10-04 03:53:45

将box-sizing: border-box;包含在.footer_grid中。基本上，它所做的是，包括边框的宽度。否则，您的网格将比100vw更宽，这将带来水平滚动体。

票数 2

Stack Overflow用户

发布于 2019-06-23 18:59:48

我遇到了一些麻烦，比如网格和出现的水平滚动条。我设法做到了，但我真的不知道它是如何工作的。

我试图为全屏英雄形象创建一个专栏页面，所以我使用：

main{
    display:grid;
    grid-template-columns: 100vw;
    grid-template-rows:15vh 85vh;
    grid-template-areas:
    "header"
    "hero";
    width: 100%;
}