css - Bulma - 在一个浏览器窗口上调整图像和页脚而不滚动
问题描述
我想显示图像和页脚以始终适合浏览器窗口 - 不滚动。为了适合图像,应在保持比例的同时调整大小。页脚应始终位于底部,图像填充其余空间。我认为这应该很容易用 bulma 实现 - 但到目前为止我无法让它发挥作用。英雄布局不是用 bulma 实现这一目标的正确布局吗?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
</head>
<body>
<section class="hero" style="height: 100vh">
<div class='hero-body is-paddingless'>
<figure class='image'>
<img src="https://via.placeholder.com/400x800">
</figure>
</div>
<div class='hero-foot'>
<div class='box'>
hero-foot
</div>
</div>
</section>
</body>
</html>
解决方案
首先,我认为很多人都不知道 bulma 或 hero-layout 是什么,但如果你想让背景成为图片并适合整个屏幕,你应该尝试一下,这也应该使页面全宽而不滚动:
CSS:
body, html {
height: 100%;
}
.bg {
background-image: url("your_background");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
如果这对您不起作用,您可以尝试禁用滚动:
overflow: hidden;
推荐阅读
- python - 我的硒程序找不到元素
- python - 从数据框列中提取异常
- python - 使用 Google Sheet 公式计算归一化分数
- java - 如何在Android中创建一个实例来调用一个活动的方法到一个服务类?
- php - 单个 MySQL 列中的首选项列表
- docker - 将环境变量添加到包含以下内容的 Docker 文件中:
- ansible - 有没有办法在 Ansible 中显示已注册的处理程序或侦听器?
- rendering - 我们可以根据到相机的距离来控制 Viewer 中的渐进式渲染吗?
- java - 线程在终止之前不会输出流
- c++ - 使用 g++ 编译包含根库的 c++