相关疑难解决方法(0)
如何让flexbox儿童100%的父母身高？
我正在尝试填充flexbox内的flex项目的垂直空间.
.container {
height: 200px;
width: 500px;
display: flex;
flex-direction: row;
}
.flex-1 {
width: 100px;
background-color: blue;
}
.flex-2 {
position: relative;
flex: 1;
background-color: red;
}
.flex-2-child {
height: 100%;
width: 100%;
background-color: green;
}<div class="container">
<div class="flex-1"></div>
<div class="flex-2">
<div class="flex-2-child"></div>
</div>
</div>这是JSFiddle
flex-2-child 没有填写所需的高度,除非在以下两种情况下:
flex-2高度为100%(这很奇怪,因为弹性项目默认为100%+ Chrome中存在错误)flex-2-child有一个绝对的位置也很不方便
这在目前的Chrome或Firefox中不起作用.
推荐指数
解决办法
查看次数
CSS3 Flexbox全高应用和溢出
我有一个使用经典电子邮件的应用程序,如下面的布局.
我使用新的CSS3 flexbox模型构建它,它的工作非常出色,直到我添加了用户在文件夹框中动态添加新项目的能力.我希望flexbox以这样的方式工作,只要文件夹框中还有空间,它就不会开始生长到下面的任务框中.不幸的是,这不是我所看到的(在Chrome 17中).
我在这里构建了一个JSFiddle 来演示这个问题.只需单击" 添加文件夹"链接,您就会看到文件夹框增长,即使它有足够的空间容纳新的孩子.
对于这个问题.如何使用flexbox构造两个垂直对齐的盒子,使得一个占据可用高度的三分之二(box-flex 2)而另一个占据三分之一(box-flex 1),并且它们以这种方式完成当新内容添加到第一个框时,它不会开始增长,直到它没有空间.
推荐指数
解决办法
查看次数
HTML5灵活的盒子模型高度计算
在研究了灵活的盒子模型一整天后,我必须说我真的很喜欢它.它以快速,干净的方式实现了我在JavaScript中实现的功能.然而有一件事让我感到困惑:
我不能扩展div来采取灵活的盒子模型计算的全尺寸!
为了说明这一点,我将证明一个例子.在其中两个灵活的位置采用精确的和高度,但其中的div只占用"<p>...</p>"元素的高度.对于这个例子并不重要,但我最初尝试的是在另一个"灵活的盒子模型"中放置一个"灵活的盒子模型",这在我看来一定是可能的
html, body {
font-family: Helvetica, Arial, sans-serif;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#box-1 {
background-color: #E8B15B;
}
#box-2 {
background-color: #C1D652;
}
#main {
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.flexbox {
display:-moz-box;
display:-webkit-box;
display: box;
text-align: left;
overflow: auto;
}
H1 {
width: auto;
}
#box-1 {
height: auto;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient: vertical;
-moz-box-flex: 3;
-webkit-box-flex: 3;
box-flex: 3;
}
#box-2 {
height: auto;
min-width: …推荐指数
解决办法
查看次数
如何溢出:在弹性框内滚动
我已经构建了这个布局:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
html, body{
margin:0;
padding:0;
height:100%;
}
.flex{
display:flex;
flex-direction:column;
min-height:50%;
width:33.3333%;
float:left;
border:1px solid #C8C7CC;
box-sizing:border-box;
overflow:scroll;
}
.flex:last-child{
width:66.6666%;
}
</style>
</head>
<body>
<div class="flex">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
</ul>
</div>
<div class="flex">
</div>
<div class="flex">
</div>
<div class="flex">
</div>
<div class="flex">
</div>
</body>
</html>
我想在每个弹性框内放置长列表.我需要它们单独滚动,同时填充浏览器窗口中的所有可用空间.我已经管理了后者,但是我怎么能得到一个弹性框来滚动而不是在溢出时增长？
推荐指数
解决办法
查看次数
在Safari,Firefox和Edge VS Chrome上使用(overflow-y)滚动的flexbox的不同行为
在关于plunker的这个页面(https://plnkr.co/edit/gMbgxvUqHNDsQVe4P7ny?p=preview)中有一个奇怪的问题.
在Windows和Android上的Chrome上(Canary也是如此)一切正常.我可以滚动两个区域(左侧和右侧),页面的顶部和底部div位于设备屏幕的顶部和底部.我随时都能看到它们(见下图).
在iPad或iPhone,iOS,Safari或Chrome上,这不是我得到的.还有Windows上的Firefox 47.0.1.
页面很长,右边只有一个滚动,就像页面上没有弹性框一样,这个代码只是被忽略了:
.bigone {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.main {
flex: 1 1 0;
display: flex;
}
.container-fluid {
display: flex;
}
.col-6 {
overflow-y: auto;
}
Quirk例子:
只需单击此按钮,即可在iPad或iPhone上看到:
为什么会这样？ Safari和Firefox的bug还是Chrome的？为什么在Chrome上Windows和Android上的一切都很好？如果在未来的新Safari中这将运行良好,如何处理旧iOS和Firefox的旧设备？
我会感激任何答案.谢谢.
推荐指数
解决办法
查看次数
Firefox中Flexbox中的垂直滚动渲染问题
我想在父项中包含一个flex项,以便它不会溢出父项之外.只有弹性项目应该有一个滚动条(如果需要).
我的样式在Chrome和IE11中运行良好,但不适用于Firefox.我怀疑在flex-basis设置的样式的解释上有所不同#wrapper,但我无法弄清楚为什么Firefox以不同的方式呈现.
这是Chrome中所需的渲染:
这是Firefox中发生的事情:
我可以通过添加来应用"胶带"修复#left { height: calc(100vh - 50px); },但如果可能的话,我更愿意确定实际的不一致性.
body, html, h1 {
padding: 0;
margin: 0;
}
header {
background-color: rgba(0, 255, 255, 0.2);
height: 50px;
}
#main {
height: 100vh;
background-color: rgba(0, 255, 255, 0.1);
display: flex;
flex-flow: column;
}
#wrapper {
display: flex;
flex-grow: 2;
flex-basis: 0%;
}
#left {
overflow-y: scroll;
background-color: rgba(0, 255, 255, 0.2);
width: 30%;
}
.box {
margin: 5px 0;
height: 50px;
width: 100%; …推荐指数
解决办法
查看次数
CSS网格/布局框架,侧重于固定元素和单页全屏布局
经验法则 - 如果您在布局中过多地使用CSS,请切换到框架.我一直在浏览那里的几十个网格/布局框架,其中大部分都集中在传统的文档网格布局上.
我的页面更像是一个SPA(单页面应用程序).它类似于桌面应用程序使用的布局.很明显,HTML不能很好地处理这个问题,需要进行大量的CSS修补.
这是我想要实现的布局示例(这应该填满整个屏幕):
请注意,固定菜单不应悬停在它们后面的滚动内容上.每个块应位于其自己的单独"框架"中 - 即左侧长列表的滚动条应显示在固定菜单下方.
我一直无法找到支持这一点的轻量级网格框架(像Sencha或Kendo UI这样的框架有点过分了).手动执行CSS非常费力.特别是如果我决定显示一个模态对话框,并在此对话框中需要类似的布局(这是最终杀了我的东西).或者,如果我决定在底部需要另一个固定菜单,那么一切都会破裂.
我甚至不确定只有CSS才有可能(我知道至少固定的底部菜单需要CSS中的一些硬编码值以缩小其后面的内容,以便滚动条不重叠).如果需要JS解决方案,并且我希望它能够处理浏览器屏幕大小调整事件 - 那么所有地狱都会破裂,因为没有简单的常见事件可以做到这一点.
我应该如何以可维护/灵活的方式处理这个问题？
评论:正如您将注意到的,我自己建议使用HTML表格来实现此布局.我真的不想接受我自己的答案.我有一种感觉,没有人会"勇敢"地提出表格(毕竟这是有争议的),我愿意为了讨论而遭受挫折
澄清:当说可维护和灵活时,我似乎不够清楚.我的意思是通过各种场景或所需的修改优雅地(即代表我的工作很少)进行布局处理.为了绝对具体,我们举一些例子:
布局不应该介意它是显示为整页还是固定模式对话框(即引导对话框).在这些场景之间切换应尽可能少地更改布局代码.
布局应该支持多种方式来描述宽度和高度(即侧栏的宽度或顶部菜单的高度).更具体地说,应支持以下大小调整方法:
- 精确的固定像素大小.
- 使用容器的百分比进行相对大小调整.例如:侧栏宽度是整个容器宽度的30%(整页或对话框).另一个例子:顶部菜单高度是容器整个高度的20%(整页或对话框).
- 包裹自己的内容.示例:顶部菜单的高度取决于其中的内容.如果输入一行文本,它将包装它而不滚动.如果输入两行文本,它将是两倍大并且不滚动就保持它们.
- 奖金:两个简单的组合.像侧边栏宽度为20%但不小于50像素.
正如Ian Clark最专业地指出的那样,CSS可以实现大部分开箱即用的请求.对此没有任何争论.问题仍然是原始CSS是否最简单易用,以及是否有任何可以通过框架/其他机制(如flexbox/tables)从开发人员卸载的内容.
推荐指数
解决办法
查看次数
具有动态内容的响应元素 - 只需一个元素滚动
我正在尝试在2个其他流体元素的中间创建一个流畅的可滚动元素.整个网站应该完全响应.
我的标记基本上是这样的:
<h1>Title</h1>
<nav>Changeable Menu Items In A List</nav>
<section>
Lots of items which are changing all the time.
</section>
<footer>Footer</footer>
我想滚动的唯一元素是<section>元素.
我无法使用
position: fixed其他元素来保持它们的位置,因为页面的背景是图像,并且需要通过元素可见.因此,在<nav>修复等等时滚动页面会产生冲突.我无法使用
position: absolute任何元素,因为它们都有动态内容.我不能只给出
<section>一些margin-top等于它的高度,<nav>因为它可能会改变.由于
<nav>元素中的动态内容,我无法给出<section>高度,即使是基于流量%的高度,因为我不知道有多少空间可用.
我现在有点想法......任何帮助都非常感激.
推荐指数
解决办法
查看次数
没有溢出父容器的动态高度 DIV
我想在另一个包装器内有一个动态高度 div，它总是填充父容器，并自动缩小其大小并显示垂直滚动条供用户在发生溢出时滚动。
下图是我所期待的：
目前，内容窗格只是溢出包装器并将页脚窗格推到视线之外。
在这里小提琴http://jsfiddle.net/WWcAz/1/
#wrapper{
padding: 10px;
vertical-align: middle;
background-color: cyan;
min-height: 100px;
height: 300px;
max-height: 300px;
}
#dynamic{
background-color: green;
overflow: auto;
overflow-x: hidden;
min-height: 40px;
}
这可以用纯 CSS 实现吗？
(** 更新:) 我不想要任何带有我的包装器的滚动条，并且包装器必须是固定大小，希望这很清楚 - 谢谢:)
推荐指数
解决办法
查看次数
Flex-grow不能按预期工作(flex项目没有我期望的宽度)
我正在尝试使用flexCSS属性将一组元素放入一个整洁的小盒子中.
它看起来在IE10中看起来我想要它,但Chrome显示它非常不同.我基本上有:
- 容器
- 选择框(
flex:5),应该足够宽,以显示D,但不是更宽. - 文本输入(
flex:10),应占用包含宽度的一半多一点 - 确认按钮(
flex:6)应足够宽以包含其文本,但不能多.
- 选择框(
它在IE中运行良好,但在Chrome中,前两个元素占据了宽度的50%,使得确认按钮不再有效.
我的Flex逻辑是错误的,还是Chrome搞砸了？
推荐指数
解决办法
查看次数