css - 使用CSS3,我们应该如何使用新单位vh、vw,并考虑到body margin?

标签 css viewport viewport-units

<分区>

在 CSS3 中,有这两个新单位:vhvw。所以我们可以使用

height: 80vh;
width: 60vw;

缩放视口(viewport)高度为 80% 或视口(viewport)宽度为 60% 的 block 。

但我认为通常情况下,默认的 body 元素在所有 4 个边上都有一个 8px 边距,那么我们应该如何将它合并到我们对 vw< 的使用中vh 如果我们确实需要使用 100vh100vw(或者几乎可以覆盖宽度和高度的数量,但是与 body 的边缘一起工作)?一些选项包括 (1) 将正文边距重置为 0,(2) 将正文边距重置为 8px(以确保它在所有浏览器中都相同(3)使用height: calc(100vh - 8px)width: calc(100vw - 16px) 设置适当的高度和宽度...但是 8px16px 似乎太硬编码了。有什么好的做法可以处理这个问题?

最佳答案

(4) 您必须使用vhvm 单位定义主体边距。

body {
   margin: 0.5vh 0.5vw;
}

.content {
  width: 99vw;
  height: 99vh;
}

这是确保视口(viewport)高度和宽度为 100% 的唯一方法。

关于css - 使用CSS3,我们应该如何使用新单位vh、vw,并考虑到body margin?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34054243/

相关文章:

html - 100vh 在前兄弟底部添加空间

html - 在 Chrome 中刷新后,Font Awesome 图标消失

JQuery:在 WebSphere Portal 7 主题中从页面底部 float 工具栏

css - 在确保最小宽度的同时按 VW 单位调整宽度

html - 通过 vh 和 vw 调整 css 字体大小

html - 响应式设计中的字体大小和元视口(viewport)

css - 在移动模式下使用媒体查询居中图像

javascript - 使用 jquery 的 slider 分页

javascript - div 中的内容在 safari 中显示在边界外

html - 使用视口(viewport)宽度=设备宽度时如何禁用移动设备上的轻微剩余水平滚动