在transform:scale上使用位置粘性的问题

时间:2019-05-03 18:27:45

标签: html css css3 flexbox sticky

我正在尝试构建布局。 2列使用flexbox。 我希望左列位置保持不变。 (以防主要内容高度过高并且用户向下滚动)。

但是,主div也具有固定宽度。 (大屏幕设备需要它)

不幸的是,transform:scale给我带来了一个问题。 top:0似乎不是0。

下面是代码(请以“整页”模式运行):

 body{
             background-color: blue;
         }
    
         #fixedBody{
             margin: auto;
            width:980px;
            display: flex;
            justify-content: space-between;
            background-color: white;
            transform: scale(1.25);
            transform-origin: 50% 0 0;
         }
    
         aside{
             flex: 0 0 100px;
             position: sticky;
             top: 0px;
             align-self: self-start;
         }
    
         article{
             flex:1;
             text-align:center;
         }
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <section id="fixedBody" class="flex-layout">
            <aside>
                <ul>
                    <li>menu</li>
                    <li>menu</li>
                    <li>menu</li>
                    <li>menu</li>
                    <li>menu</li>
                    <li>menu</li>
                    <li>menu</li>
                    <li>menu</li>
                </ul>
            </aside>
            <article>
                <ul>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                    <li>main content</li>
                </ul>
            </article>
        </section>
    
</body>
</html>

有人知道如何解决此问题吗? 谢谢!

0 个答案:

没有答案