<分区>
<分区>
我试图只使用 css 制作水平滚动条，但我遇到了一个问题，我需要将 div 元素的 height 设置为 parent 宽度的 100% 。这是我的水平滚动部分的示例代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.horizontal-scroll::-webkit-scrollbar {
display: none;
}
.horizontal-scroll {
width: 100px;
height: 97vw;
transform: rotate(-90deg) translateY(-100px);
overflow-x: hidden;
overflow-y: auto;
border: 5px solid black;
transform-origin: right top;
}
.Card {
height: 100px;
width: 100px;
background-color: aliceblue;
transform: rotate(90deg);
display:block;
}
</style>
</head>
<body>
<div class='horizontal-scroll'>
<div class='Card'>1</div>
<div class='Card'>2</div>
<div class='Card'>3</div>
<div class='Card'>4</div>
<div class='Card'>5</div>
<div class='Card'>6</div>
<div class='Card'>1</div>
<div class='Card'>2</div>
<div class='Card'>3</div>
<div class='Card'>4</div>
<div class='Card'>5</div>
<div class='Card'>6</div>
<div class='Card'>1</div>
<div class='Card'>2</div>
<div class='Card'>3</div>
<div class='Card'>4</div>
<div class='Card'>5</div>
<div class='Card'>6</div>
<div class='Card'>1</div>
<div class='Card'>2</div>
<div class='Card'>3</div>
<div class='Card'>4</div>
<div class='Card'>5</div>
<div class='Card'>6</div>
</div>
</body>
</html>请注意，我必须将高度设置为父宽度的 100%。不是视口(viewport)的宽度。
最佳答案
引用这个https://codepen.io/ItScofield/pen/PNVZoQ
<div class='content'>Aspect ratio of 1:1</div>
</div>
.box {
position: relative;
width: 20%;
/* desired width */
margin: 5px;
}
.box:before {
content: "";
display: block;
padding-top: 100%;
/* initial ratio of 1:1*/
}
关于html - Css:如何将高度设置为父宽度的 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56015281/