为没有滚动条的 100% 高度网格设置边距或填充 [重复]
Posted
技术标签:
【中文标题】为没有滚动条的 100% 高度网格设置边距或填充 [重复]【英文标题】：setting a margin or padding for a 100% height grid without scrollbars [duplicate] 【发布时间】：2021-08-30 21:05:17 【问题描述】：我有一个网格布局。我想在它周围添加一个 5px 的边距，但这样做会添加一个滚动条。
是否可以在不添加滚动条的情况下设置边距？
function toggle()
document.querySelector(".container").classList.toggle("withMargin");
html,
body,
.container
height: 100%;
margin: 0;
.container
display: grid;
grid-template-rows: 50px 1fr 1fr;
grid-template-columns: 300px 1fr 1fr;
gap: 5px 5px;
grid-auto-flow: row;
grid-template-areas: "logo header header" "nav-one main main" "nav-two main main";
background-color: black;
.main
grid-area: main;
background-color: lightcoral;
.logo
grid-area: logo;
background-color: lightcyan;
.header
grid-area: header;
background-color: lightgoldenrodyellow;
.nav-one
grid-area: nav-one;
background-color: lightgray;
.nav-two
grid-area: nav-two;
background-color: lightgreen;
.container.withMargin
margin: 5px;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="main">
<br /><button onclick="toggle()">toggle .container margin</button>
</div>
<div class="logo">logo</div>
<div class="header">header</div>
<div class="nav-one">nav one</div>
<div class="nav-two">nav two</div>
</div>
</body>
</html>【问题讨论】：
你能用box-sizing: border-box吗？
我应该在哪里设置？
【参考方案1】：
使用padding 代替margin 选择器.container.withMargin：
.container.withMargin
padding: 5px;
并为.container 选择器添加box-sizing: border-box。
function toggle()
document.querySelector(".container").classList.toggle("withMargin");
html,
body,
.container
height: 100%;
margin: 0;
.container
display: grid;
grid-template-rows: 50px 1fr 1fr;
grid-template-columns: 300px 1fr 1fr;
gap: 5px 5px;
grid-auto-flow: row;
grid-template-areas: "logo header header" "nav-one main main" "nav-two main main";
background-color: black;
box-sizing: border-box;
.main
grid-area: main;
background-color: lightcoral;
.logo
grid-area: logo;
background-color: lightcyan;
.header
grid-area: header;
background-color: lightgoldenrodyellow;
.nav-one
grid-area: nav-one;
background-color: lightgray;
.nav-two
grid-area: nav-two;
background-color: lightgreen;
.container.withMargin
padding: 5px;
<!DOCTYPE html>
<html>
<head> </head>
<body>
<div class="container">
<div class="main">
<br />
<button onclick="toggle()">toggle .container margin</button>
</div>
<div class="logo">logo</div>
<div class="header">header</div>
<div class="nav-one">nav one</div>
<div class="nav-two">nav two</div>
</div>
</body>
</html>【讨论】：
如果我理解border-box 正确，那么这将影响.container 中的所有其他元素。正确的？并不是说这是一个问题——只是想做好准备。
@IMTheNachoMan，我有点错了。您需要为 .container 类添加 box-sizing:border-box。这将是正确的。不，这只会影响类 .container。查看我更新的 CSS 代码和描述。
哦，我看到box-sizing 没有被继承。谢谢！这很好用。
@IMTheNachoMan，很高兴为您提供帮助。以上是关于为没有滚动条的 100% 高度网格设置边距或填充 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
没有填充或边距：是啥让我的表格无法获得 100% 的宽度？ & 为啥当鼠标悬停在可滚动的 el 上时滚动条不随滚轮滚动？