个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
25
4
我正在尝试使用新的 display: flex 语法实现通常被描述为“ chalice ”(参见 ALA article)的三列布局。
要求如下:
我用下面的代码得到了前三个要求:
<body>
<div class="container">
<header class="masthead">
<h1>The Header</h1>
</header>
<div class="side-left column">
Left sidebar
</div>
<div class="middle column">
Content goes here
</div>
<div class="side-right column">
Right sidebar
</div>
<footer class="footer">
© Footer
</footer>
</div>
</body>
CSS:
.container {
display: flex;
flex-flow: row wrap;
min-width: 500px;
max-width: 1100px;
}
.masthead {
flex: 1 100%;
}
.side-left,
.side-right {
flex: 0 0 150px;
}
.middle {
flex: 1;
}
.footer {
flex: 1 100%;
}
现场直播:jsBin
但是，我坚持使用 100% 的高度。我已经尝试将某些列或容器设置为 height: 100% 或 min-height: 100% 但似乎都不起作用。我是否需要许多其他 flex 属性之一来处理这个问题？我似乎无法透过树木看到森林。
最佳答案
.container { 最小高度:100vh； }
关于html - "Holy Grail"使用flexbox的三列布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25933647/
25
4
0
我正在尝试使用新的 display: flex 语法实现通常被描述为“ chalice ”(参见 ALA article)的三列布局。 要求如下: 一个页眉和页脚，中间有三列 外部列具有固定宽度 内栏
与 this layout (显然不是我的)，我想用 javascript 调整/隐藏边栏。在编写 js 代码之前，我尝试手动更改左右列的宽度。问题是，当设置为较小的值时，中心列不会填满释放的宽度。但
我正在尝试使用 Angular Flex 布局创建一个简单的页面。 (实际上，我正在从应用程序中删除 Bootstrap，因为我正在使用 Angular Material，并且觉得混合它们并不是一件好
我的目标是使用 flex 构建一个基于“ chalice ”的布局。主要内容区域需要有额外的内容。 我在将“左上内容、上内容中心、右上内容、中内容和下内容”彼此对齐并填充可用空间时遇到了真正的麻烦。
我将 A List Apart 的“ chalice ”用于具有固定右列的液体主列(他们的列也显示左列，但我已将其删除)。我在主栏区域和右栏区域添加了 DIV，这些额外的 DIV 有边框(这也有助于我
我想以特定的时间间隔播放流媒体 - 如果您愿意的话，可以将其视为一种在线广播。我目前正在使用Icecast但更愿意采用点对点解决方案。我看到 Swarm roadmap 上有一个流式传输的概念证明但周
我正在尝试使用 Flexbox 构建“ chalice ”布局。 固定标题 固定、可折叠、可滚动的左侧导航 灵活内容区 固定、可折叠、可滚动的右侧导航 见下文: 除了标题下方“应用程序”区域的高度外，
我是一名优秀的程序员,十分优秀！