Question

好的，问题是，我将的宽度和高度设置为视口大小，但是如果我在<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;
}

Answer 1

在我看来，进入此灵活框网格的内容正在扩展您正在处理的区域。

尝试在带有flex-box的项目上添加“ box-sizing：border-box”吗？可能对您有用。

此外，如果归结为它...很脏，但是... 溢出-y：隐藏，溢出-x：隐藏将删除该容器的溢出并使它不滚动...但是再次...在我看来，它很脏。

flexboxgrid，宽度= 100vw，高度= 100vh，仍然显示滚动条

1 个答案: