1

好的，问题是，我将宽度和高度设置为视口大小，但是如果我在里面写任何文本<h1></h1>，就会出现滚动条。我不知道为什么它会这样，我想我在做一些不合时宜的事情。我只使用 HTML 和 CSS 进行了一些设计，但从未遇到过这样的事情，这次我尝试使用 FlexBoxGrid 进行一些响应式设计测试并遇到了这个问题。正如我所说，只要我删除<h1></h1>滚动条内的文本就会消失。那些被评论的人也会发生同样的事情<h3></h3>。也发生<p></p>...：/

<body>
<!-- HEADER SECTION -->
<header id="sec_home">
    <div class="row center-xs center-sm center-md center-lg middle-xs middle-sm middle-md middle-lg">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <h1>sdfsdf</h1>
            <!--<h3>
                The beast.
            </h3>
            <h3>
                The best.
            </h3>-->
        </div>
    </div>
</header>

<!-- BIOGRAPHY SECTION -->
<section id="sec_bio">

</section>


* {
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: 'BlkLite'; /*a name to be used later*/
    src: url('/fonts/BlkLite.ttf'); /*URL to font*/
}

h1 {
    font-family: 'BlkLite';
    font-size: 8em;
    color: rgb(206, 206, 206);
    background-color: blueviolet;
}

#sec_home {
    background-image: url("/bg/14582.jpg");
    background-color: black;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100vw;
}
4

1 回答 1

0

在我看来，进入这个 flex-box 网格的内容正在扩展您正在处理的区域。

尝试将“box-sizing : border-box”添加到带有 flex-box 的项目中？这可能对你有用。

另外，如果归根结底...它很脏但是... overflow-y: hidden 和 overflow-x: hidden 将删除该容器的溢出并使其不会滚动...但是再次... .它在我看来很脏。

于 2018-06-25T22:25:25.153 回答