如何在 .text 和 .img div 上设置高度自动而不是 100% 高度？
* {
margin: 0px;
padding: 0px;
}
html,
body,
.start {
height: 100%;
}
.header {
height: 80px;
background: blue;
}
.slider {
height: calc(100% - 80px);
background: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1;
grid-template-areas: "text img";
}
.text {
grid-area: text;
background: green;
}
.img {
grid-area: img;
background: yellow;
}
@media screen and (max-width: 768px) {
.slider {
grid-template-areas: "text text" "img img";
}
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="a.css">
</head>
<body>
<div class="start">
<header class="header">
<h2>hola</h2>
</header>
<div class="slider">
<div class="text">
<h1>titulo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit dolorum deserunt, culpa aspernatur cupiditate, quos excepturi expedita consectetur doloribus fugiat amet ad, ipsum unde eaque. Atque, eius, vel! Ipsa, blanditiis.</p>
</div>
<div class="img">
<h1>titulo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit dolorum deserunt, culpa aspernatur cupiditate, quos excepturi expedita consectetur doloribus fugiat amet ad, ipsum unde eaque. Atque, eius, vel! Ipsa, blanditiis.</p>
</div>
</div>
</div>
</body>
</html>最佳答案
编辑
在网格周围添加容器以允许背景样式。
只需删除 .slider 元素上的高度属性。 .img 和 .text 元素占用剩余空间以填充额外空间。
* {
margin: 0px;
padding: 0px;
}
html,
body,
.start {
height: 100%;
}
.header {
height: 80px;
background: blue;
}
.body-background {
height: calc(100% - 80px);
/* apply background here */
}
.slider {
background: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "text img";
}
.text {
grid-area: text;
background: green;
}
.img {
grid-area: img;
background: yellow;
}
@media screen and (max-width: 768px) {
.slider {
grid-template-areas: "text text" "img img";
}
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="a.css">
</head>
<body>
<div class="start">
<header class="header">
<h2>hola</h2>
</header>
<div class="body-background">
<div class="slider">
<div class="text">
<h1>titulo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit dolorum deserunt, culpa aspernatur cupiditate, quos excepturi expedita consectetur doloribus fugiat amet ad, ipsum unde eaque. Atque, eius, vel! Ipsa, blanditiis.</p>
</div>
<div class="img">
<h1>titulo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit dolorum deserunt, culpa aspernatur cupiditate, quos excepturi expedita consectetur doloribus fugiat amet ad, ipsum unde eaque. Atque, eius, vel! Ipsa, blanditiis.</p>
</div>
</div>
</div>
</div>
</body>
</html>关于html - CSS 网格 div 高度自动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55346552/