html - 在移动设备上查看时,CSS Grid 不能水平放置
问题描述
我正在尝试创建一个响应式布局,其中页眉和页脚占据大约 5% 的屏幕并且是固定的。中间部分根据其中的元素数量滚动。尽管我只提到了 fr 和 % 值,但无论屏幕尺寸如何变化,元素尺寸都保持不变。在 Firefox 响应模式(galaxy s9)中,我看到容器类之外的垂直和水平滚动条。有人可以指出我可能做错了什么吗?
<html>
<head>
<meta charset="UTF-8">
<style>
.main{
display:grid;
grid-template-rows: 2fr 20fr 2fr;
gap: 2px;
}
.header{
background-color: lightblue
}
.container{
display: grid;
overflow: auto;
grid-auto-flow: row;
grid-auto-rows: 25%;
gap: 2px;
}
.tapbar{
background-color: pink
}
.content{
background-color:yellowgreen;
}
</style>
</head>
<body>
<div class='main'>
<div class='header'>header here</div>
<div class='container'>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
</div>
<div class='tapbar'>tap bar here</div>
</div>
</body>
编辑:除了选择的答案,我做的另一个错误是没有让 html 覆盖整个区域。将此添加到样式中修复了它
html,body,.main{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
解决方案
您只需在 html 页面的 head 标记中添加以下元标记
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
推荐阅读
- nginx - nginx:将 nginx 配置为基于 docker 的微服务的反向代理时,在上游“服务器 abcd”中找不到 [emerg] 主机
- javascript - 循环遍历 javascript 表格和列表元素
- python - 显示变量错误pyautogui
- xml - Spring saml:为什么在 saml 响应中,可以加密密钥信息?
- elixir - 从 escript 访问 IEx.pry
- oracle - ANT - PLSQL 执行错误
- bitbake - 如何让 Openembedded 编译 tar.gz 文件而不是 tar.xz
- javascript - Javascript 承诺在使用 Promise.all 时无法正常工作
- c# - 从服务器推送时 SignalR 重用逻辑
- c# - 使用 LINQ 从日期范围内的列表中选择不同