css-grid 中的行未占据 100% 的高度
Row not taking 100% height in css-grid
我想创建一个具有 Bootstrap
的 navbar
和 css-grid
布局的页面。
在顶层,我创建了一个包含 1 列和两行的 css grid
。我希望网格包含 2 行。第一行的高度应与 bootstrap 的导航栏高度相同。第 2 行的高度应占据页面中所有剩余的 space。
.css-grid-container-common-styles{
height:100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto; /* with height = 100%, I want that height for nav is calculated and assigned to row 1, remaining height is assigned to row 2*/
}
Bootstrap 的导航栏位于第一行,横跨所有列
.css-grid-item-nav-div{
grid-column: 1 / -1;
grid-row: 1 / 2;
border: 3px solid black;
}
第 2 行有一个按钮,但该行应占用所有剩余的可用按钮 space。
.css-grid-item-login-div{
grid-column: 1 / -1;
grid-row: 2 / -1;
border: 3px solid black;
}
问题 - 第二行的高度等于按钮的高度。我如何让它占用所有剩余的 space?
完整代码 - HTML/CSS
.body-common-styles {
background: linear-gradient(45deg, #33b1f8 37%, #6e90f6 100%);
/*syntax linear-gradient(direction, color1 limit, color2 limit)*/
color: white;
font-family: Helvetica;
line-height: 1;
}
.div-common-styles {
background-color: #0F2148;
}
.button-common-styles-normal {
/*background: radial-gradient(ellipse,#268ff4 5%,#4da3f8 95%); */
background-color: #4da3f8;
border: none;
color: white;
border-radius: 8px;
width: 100px;
/* sets the width of the content area to 200 px */
height: 40px;
box-sizing: border-box;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.button-common-styles-normal:hover {
background-color: #268ff4;
}
.center-horizontally-common-styles {
display: block;
margin: auto auto;
}
.centre-vertical-common-styles {
position: fixed;
left: 50%;
/*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
top: 50%;
/* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
transform: translate(-50%, -50%);
}
.centre-button-vertical-common-styles {
position: absolute;
left: 50%;
/*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
top: 50%;
/* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
transform: translate(-50%, -50%);
}
.debug-border-common-styles {
border: 3px solid black;
height: 200px;
width: 400px;
}
.css-grid-container-common-styles {
height: 100%;
display: grid;
grid-template-columns: 1fr;
/*one column for nav*/
grid-template-rows: auto auto;
}
.css-grid-item-nav-div {
grid-column: 1 / -1;
grid-row: 1 / 2;
border: 3px solid black;
}
.css-grid-item-login-div {
grid-column: 1 / -1;
grid-row: 2 / -1;
border: 3px solid black;
}
<div class="css-grid-container-common-styles">
<nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item-nav-div">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html">CodingJedi</a>
<div class="collapse navbar-collapse justify-content-between" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="widgets.html">About</a>
</li>
</ul>
</div>
</nav>
<div>
<div class="css-grid-item-login-div">
<button type="button" class="button-common-styles-normal"> Click Me! </button>
</div>
</div>
</div>
您必须解决一些问题才能使其正常工作。
第一个问题在您的情况下可能不是问题,但在 运行 这段代码中是一个问题。 height: 100%
仅当祖先元素也具有确定的工作高度时才有效。对于全屏高度,您可以使用 100vh
.
第二个问题,auto auto
的行高不是那么聪明,它几乎会将 space 平分。您可以将其替换为 auto 1fr
。 fr
是一个考虑网格的新单位,1fr
它将占用剩余的 1 个分数。
第三,这是您遇到的主要问题。您在 css-grid-item-login-div
周围有边框,但网格区域是在其父项上定义的。在 firefox 中你可以使用 display:contents
但更好的解决方案是 "unwrap" css-grid-item-login-div
通过删除它的父级 div
<div>
<div class="css-grid-item-login-div">
<button type="button" class="button-common-styles-normal"> Click Me! </button>
</div>
</div>
变成
<div class="css-grid-item-login-div">
<button type="button" class="button-common-styles-normal"> Click Me! </button>
</div>
完整代码在片段中
body {
margin: 0;
}
.body-common-styles {
background: linear-gradient(45deg, #33b1f8 37%, #6e90f6 100%);
/*syntax linear-gradient(direction, color1 limit, color2 limit)*/
color: white;
font-family: Helvetica;
line-height: 1;
}
.div-common-styles {
background-color: #0F2148;
}
.button-common-styles-normal {
/*background: radial-gradient(ellipse,#268ff4 5%,#4da3f8 95%); */
background-color: #4da3f8;
border: none;
color: white;
border-radius: 8px;
width: 100px;
/* sets the width of the content area to 200 px */
height: 40px;
box-sizing: border-box;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.button-common-styles-normal:hover {
background-color: #268ff4;
}
.center-horizontally-common-styles {
display: block;
margin: auto auto;
}
.centre-vertical-common-styles {
position: fixed;
left: 50%;
/*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
top: 50%;
/* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
transform: translate(-50%, -50%);
}
.centre-button-vertical-common-styles {
position: absolute;
left: 50%;
/*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
top: 50%;
/* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
transform: translate(-50%, -50%);
}
.debug-border-common-styles {
border: 3px solid black;
height: 200px;
width: 400px;
}
.css-grid-container-common-styles {
height: 100vh;
display: grid;
grid-template-columns: 1fr;
/*one column for nav*/
grid-template-rows: auto 1fr;
}
.css-grid-item-nav-div {
grid-column: 1 / -1;
grid-row: 1 / 2;
border: 3px solid black;
}
.css-grid-item-login-div {
grid-column: 1 / -1;
grid-row: 2 / -1;
border: 3px solid black;
}
<div class="css-grid-container-common-styles">
<nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item-nav-div">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html">CodingJedi</a>
<div class="collapse navbar-collapse justify-content-between" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="widgets.html">About</a>
</li>
</ul>
</div>
</nav>
<div class="css-grid-item-login-div">
<button type="button" class="button-common-styles-normal"> Click Me! </button>
</div>
</div>
我想创建一个具有 Bootstrap
的 navbar
和 css-grid
布局的页面。
在顶层,我创建了一个包含 1 列和两行的 css grid
。我希望网格包含 2 行。第一行的高度应与 bootstrap 的导航栏高度相同。第 2 行的高度应占据页面中所有剩余的 space。
.css-grid-container-common-styles{
height:100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto; /* with height = 100%, I want that height for nav is calculated and assigned to row 1, remaining height is assigned to row 2*/
}
Bootstrap 的导航栏位于第一行,横跨所有列
.css-grid-item-nav-div{
grid-column: 1 / -1;
grid-row: 1 / 2;
border: 3px solid black;
}
第 2 行有一个按钮,但该行应占用所有剩余的可用按钮 space。
.css-grid-item-login-div{
grid-column: 1 / -1;
grid-row: 2 / -1;
border: 3px solid black;
}
问题 - 第二行的高度等于按钮的高度。我如何让它占用所有剩余的 space?
完整代码 - HTML/CSS
.body-common-styles {
background: linear-gradient(45deg, #33b1f8 37%, #6e90f6 100%);
/*syntax linear-gradient(direction, color1 limit, color2 limit)*/
color: white;
font-family: Helvetica;
line-height: 1;
}
.div-common-styles {
background-color: #0F2148;
}
.button-common-styles-normal {
/*background: radial-gradient(ellipse,#268ff4 5%,#4da3f8 95%); */
background-color: #4da3f8;
border: none;
color: white;
border-radius: 8px;
width: 100px;
/* sets the width of the content area to 200 px */
height: 40px;
box-sizing: border-box;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.button-common-styles-normal:hover {
background-color: #268ff4;
}
.center-horizontally-common-styles {
display: block;
margin: auto auto;
}
.centre-vertical-common-styles {
position: fixed;
left: 50%;
/*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
top: 50%;
/* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
transform: translate(-50%, -50%);
}
.centre-button-vertical-common-styles {
position: absolute;
left: 50%;
/*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
top: 50%;
/* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
transform: translate(-50%, -50%);
}
.debug-border-common-styles {
border: 3px solid black;
height: 200px;
width: 400px;
}
.css-grid-container-common-styles {
height: 100%;
display: grid;
grid-template-columns: 1fr;
/*one column for nav*/
grid-template-rows: auto auto;
}
.css-grid-item-nav-div {
grid-column: 1 / -1;
grid-row: 1 / 2;
border: 3px solid black;
}
.css-grid-item-login-div {
grid-column: 1 / -1;
grid-row: 2 / -1;
border: 3px solid black;
}
<div class="css-grid-container-common-styles">
<nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item-nav-div">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html">CodingJedi</a>
<div class="collapse navbar-collapse justify-content-between" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="widgets.html">About</a>
</li>
</ul>
</div>
</nav>
<div>
<div class="css-grid-item-login-div">
<button type="button" class="button-common-styles-normal"> Click Me! </button>
</div>
</div>
</div>
您必须解决一些问题才能使其正常工作。
第一个问题在您的情况下可能不是问题,但在 运行 这段代码中是一个问题。 height: 100%
仅当祖先元素也具有确定的工作高度时才有效。对于全屏高度,您可以使用 100vh
.
第二个问题,auto auto
的行高不是那么聪明,它几乎会将 space 平分。您可以将其替换为 auto 1fr
。 fr
是一个考虑网格的新单位,1fr
它将占用剩余的 1 个分数。
第三,这是您遇到的主要问题。您在 css-grid-item-login-div
周围有边框,但网格区域是在其父项上定义的。在 firefox 中你可以使用 display:contents
但更好的解决方案是 "unwrap" css-grid-item-login-div
通过删除它的父级 div
<div>
<div class="css-grid-item-login-div">
<button type="button" class="button-common-styles-normal"> Click Me! </button>
</div>
</div>
变成
<div class="css-grid-item-login-div">
<button type="button" class="button-common-styles-normal"> Click Me! </button>
</div>
完整代码在片段中
body {
margin: 0;
}
.body-common-styles {
background: linear-gradient(45deg, #33b1f8 37%, #6e90f6 100%);
/*syntax linear-gradient(direction, color1 limit, color2 limit)*/
color: white;
font-family: Helvetica;
line-height: 1;
}
.div-common-styles {
background-color: #0F2148;
}
.button-common-styles-normal {
/*background: radial-gradient(ellipse,#268ff4 5%,#4da3f8 95%); */
background-color: #4da3f8;
border: none;
color: white;
border-radius: 8px;
width: 100px;
/* sets the width of the content area to 200 px */
height: 40px;
box-sizing: border-box;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.button-common-styles-normal:hover {
background-color: #268ff4;
}
.center-horizontally-common-styles {
display: block;
margin: auto auto;
}
.centre-vertical-common-styles {
position: fixed;
left: 50%;
/*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
top: 50%;
/* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
transform: translate(-50%, -50%);
}
.centre-button-vertical-common-styles {
position: absolute;
left: 50%;
/*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
top: 50%;
/* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
transform: translate(-50%, -50%);
}
.debug-border-common-styles {
border: 3px solid black;
height: 200px;
width: 400px;
}
.css-grid-container-common-styles {
height: 100vh;
display: grid;
grid-template-columns: 1fr;
/*one column for nav*/
grid-template-rows: auto 1fr;
}
.css-grid-item-nav-div {
grid-column: 1 / -1;
grid-row: 1 / 2;
border: 3px solid black;
}
.css-grid-item-login-div {
grid-column: 1 / -1;
grid-row: 2 / -1;
border: 3px solid black;
}
<div class="css-grid-container-common-styles">
<nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item-nav-div">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html">CodingJedi</a>
<div class="collapse navbar-collapse justify-content-between" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="widgets.html">About</a>
</li>
</ul>
</div>
</nav>
<div class="css-grid-item-login-div">
<button type="button" class="button-common-styles-normal"> Click Me! </button>
</div>
</div>