Question

我试图仅使用css制作水平滚动条，但是遇到一个问题，我需要将div元素的 height 设置为父级宽度的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％。不是视口的宽度。

Answer 1

引用此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*/
}

CSS：如何将高度设置为父母宽度的100％

1 个答案: