文章/答案/技术大牛

发布

社区首页 >问答首页 >height=100vh、width=100vw、flexboxgrid、滚动条显示

问height=100vh、width=100vw、flexboxgrid、滚动条显示
EN

Stack Overflow用户

提问于 2018-06-26 03:06:36

回答 1查看 822关注 0票数 1

好的，问题是，我将的宽度和高度设置为视区大小，但是如果我在<h1></h1>中写入任何文本，滚动条就会出现。我不明白为什么它会这样，我想我是在做一些卑劣的事情。我用超文本标记语言和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;
}

flexbox

flexboxgrid

html

css

回答 1

Stack Overflow用户

发布于 2018-06-26 06:25:25

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

尝试将"box-sizing : border-box“添加到带有flex-box的项目中？这对你来说可能是可行的。

另外，如果是这样的话...它是脏的但是..。again...its -y: hidden和overflow-x: hidden将移除该容器的溢出，并使其不会在我看来是脏的。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51030346

复制

相似问题

问height=100vh、width=100vw、flexboxgrid、滚动条显示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问height=100vh、width=100vw、flexboxgrid、滚动条显示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问height=100vh、width=100vw、flexboxgrid、滚动条显示
EN