时间戳

首页 > 解决方案 > CSS 100vh 没有占用整个视口

html - CSS 100vh 没有占用整个视口

问题描述

我的 CSS 需要帮助。我希望背景使用 100vh 占据整个视口，但它不起作用。视口的元标记已包含在内。box-sizing 也已经设置好了。当我尝试使用 chrome 开发工具检查页面时，似乎没有边距或填充创建下面的空间。顺便说一句，我正在使用布尔玛 CSS。

<section class="section is-paddingless>
    <div class="columns is-vcentered has-background-primary" style="height: 100vh">
       <div class="column is-4 is-flex">
          <div class="container">Sample text</div>
       </div> 
    </div>
</section>

在此处输入图像描述

标签： htmlcss

解决方案

A. 部分类属性缺少引号符号 " 。将其从：更改<section class="section is-paddingless>为：<section class="section is-paddingless">

B. 将is-marginless类添加到该部分的子 div。

最终的html：

<section class="section is-paddingless">
    <div class="columns is-vcentered has-background-primary is-marginless" style="height: 100vh">
       <div class="column is-4 is-flex">
          <div class="container">Sample text</div>
       </div> 
    </div>
  </section>

推荐阅读