Question

我有一个棘手的布局，我可以使用一些帮助。这是它的样子：

enter image description here

有一个标题和其他一些内容，我希望这些竖条位于右上方的其他内容。它们的包装元素应该是100％的高度，理想情况下，条形也会定义为百分比，因此它们会根据内容的高度拉伸和收缩。代码的结构是这样的：

<body>
    <header></header>
    <div class="content wrapper">
        <div class="banner"></div>
        <main></main>
        <footer></footer>   
    </div>
    <aside>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </aside>
</body>

我使用flexbox获取粘性页脚。

body {
    dispay: flex;
    min-height: 100vh;
    flex-direction: column;
} 
content-wrapper {
        flex: 1;
}
    main {
    flex: 1;
}

我是Flexbox的新手，所以我不确定使用它的最佳方法是什么。以下是我尝试过的内容：

aside {
    display: flex;
    width: 40px;
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
}

bar {
    flex: 1;
}

它起作用，但我不能让内容一直向下拉伸，高度100％，高度100vh只使得旁边元素与浏览器窗口的高度相同。在条形元素上使用flex：1会使它们大小相同，这是可以的，但我更愿意让它们按百分比定义不同的大小。

我尝试的另一件事是从身体上移除弯曲方向并仅使用它：

aside {
    display: flex;
    width: 40px;
    flex-direction: column;
}
bar {
    flex: 1;
}

它将条纹一直向下拉伸，但是从主体上移除弯曲方向会混淆我所拥有的某些页面上的布局。它还在布局的一侧添加了条形图，而不是在所有内容的顶部，因此我不能从条形图的间隙看到横幅。

我尝试在包装器内部使用旁边元素，在它之前和它之后，就像它现在一样，但是找不到解决方案。

布局和代码中已经有很多东西，并不是全部由我制作，所以可能有一些我不知道影响这些元素的东西。但是，是否有人建议如何通过修复其中一个解决方案使其工作，或者是否有一种完全不同的方式可以更好地工作？

Answer 1

我用你想要的布局制作了一个jsfiddle。缺少的是身体上的position: relative，然后您可以使用position: absolute; top: 0; bottom: 0; right: 0;让酒吧占据所有高度。

要为右边的条形图获得不同的大小，可以对每个条形的flex使用不同的值。假设您希望第一个条形图占总高度的1/3，那么您可以在第一个条形图上设置flex: 1;，在第二个条形图上设置flex: 2;。

https://jsfiddle.net/2q16xk57/1/

如何在100％高度的布局上创建一个元素，也许是flexbox？

1 个答案: