【问题标题】:White space at the right of my webite on Angular我在 Angular 上的网站右侧的空白区域
【发布时间】:2020-09-12 03:41:11
【问题描述】:

Here 是我网站的链接。它可以正常工作,并且先验地在我的手机上也可以接缝,但是,它不应该左右滚动,只能上下滚动! 使用手机时,我的网站右侧有一个奇怪的白色部分。当我打开开发者模式并进入平板模式并查看元素时。我看到正文只是“好的部分”,白色部分没有在 HTML 中定义,所以我找不到问题的根源。

我的代码在https://github.com/NEGU93/agustinbarrachina 中可用。 我试过了:

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

正如herehere 所说。我不认为这个问题与页脚有关,因为它说here

这也很奇怪,因为我在主站点 (home) 中没有这个问题,所以我认为问题出在timeline HTML 或 CSS 中。

【问题讨论】:

    标签: html css angular responsive


    【解决方案1】:

    两个问题: 首先是将<i> 元素定义为600px,而不是100%: https://github.com/NEGU93/agustinbarrachina/blob/master/src/app/timeline/timeline.component.css#L274

    另一个只是在这里添加overflow-x: hiddenhttps://github.com/NEGU93/agustinbarrachina/blob/master/src/app/timeline/timeline.component.css#L32

    找到这些溢出元素的一个好方法是使用 chrome 开发者工具来缩小页面宽度直到水平滚动显示。

    然后开始从 dom 中删除元素,方法是单击它们并按下 DELETE 键。当您看到水平滚动消失的那一刻,您CTRL+Z 并向下钻取到它的子元素,您在其中执行相同的过程,直到找到讨厌的元素。然后检查它的 CSS props 以找出它为什么这样做。

    【讨论】: