相关疑难解决方法(0)
在flexbox列子上高度100%
我在使用flexbox列时遇到麻烦,因为flex'd元素的子元素不会以height百分比形式响应.我只在Chrome中检查过此内容,据我所知,这只是Chrome的问题.这是我的例子:
HTML
<div class='flexbox'>
<div class='flex'>
<div class='flex-child'></div>
</div>
<div class='static'></div>
</div>
CSS
.flexbox{
position:absolute;
background:black;
width:100%;
height:100%;
display: flex;
flex-direction:column;
}
.flex{
background:blue;
flex:1;
}
.flex-child{
background:red;
height:100%;
width:100%;
display:block;
}
.static{
background:green;
width:100%;
height:5rem;
}
我想要它,所以红色.flex-child填充蓝色.flex.为什么不起作用height:100%？
推荐指数
解决办法
查看次数
使用NEWER flexbox api在全高应用程序中进行Flexbox和垂直滚动
我想使用flexbox使用全高应用程序.我在这个链接中使用旧的flexbox(显示:框;以及其他东西)找到了我想要的东西:CSS3 Flexbox全高应用和溢出
对于旧版本的flexbox css属性,这是一个正确的解决方案.
如果我想尝试使用较新的flexbox属性,我将尝试在同一链接中使用第二个解决方案,但使用高度为0px的容器 "黑客"弹性框; 它使显示垂直滚动.
我不喜欢它,因为它引入了其他问题,它更像是一个解决方案而不是解决方案.
我准备了一个基本示例的jsfiddle:http://jsfiddle.net/ch7n6/
html, body {
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
#container article {
flex: 1 1 auto;
overflow-y: scroll;
}
#container header {
background-color: gray;
}
#container footer {
background-color: gray;
}它是一个"全高html网页",由于内容元素的flexbox,页脚位于底部.我建议你在css代码和结果之间移动吧来模拟不同的高度.
推荐指数
解决办法
查看次数
如何使嵌套的flexbox工作
我有一个嵌套的flexbox设置的小例子:http://jsfiddle.net/ThomasSpiessens/MUrPj/12/
<div class="box fullSize">
<div class="boxHeader">HEADER</div>
<div class="boxContent">
<div class="box fullSize">
<div class="boxHeader moregreen">INNER HEADER</div>
<div class="boxContent red">CONTENT CONTENT CONTENT</div>
<div class="boxFooter moreblue">INNER FOOTER</div>
</div>
</div>
<div class="boxFooter">FOOTER</div>
</div>
在此示例中,以下内容适用:
- CSS'box'类使用flexbox属性,只有boxContent被告知增长.有关特定的CSS属性和值,请检查小提琴.
- 'fullSize'只是将宽度和高度都设置为100%.
当您使用Firefox和Chrome检查这个小提琴时,您会得到不同的结果.在Firefox中它做了我想它必须做的事情,这是拉伸内部.boxContent.但是在Chrome中,内部.boxContent不会被拉伸.
有没有人知道如何在Chrome中制作内容？也许是一个缺少的特定webkit属性？
推荐指数
解决办法
查看次数
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: …推荐指数
解决办法
查看次数
高级渲染在Chrome和Firefox中有所不同
我发现如果我们设置一个块级别元素,有height:auto或height: 0~100%没有设置父级的高度具有显式值,并且其块级别子级具有底部边距,那么它将在Chrome中以不同方式计算高度,但在Firefox中则不同.对于设置的情况height: 1%:
http://codepen.io/anon/pen/BjgKMR
html {
background: pink;
}
body {
background: yellow;
}
div {
height: 1%;
}
inner {
margin-bottom: 30px;
margin-top: 20px;
}<div>
<p class="inner">block level element</p>
</div>div块的高度将计算为margin-bottom + content height of p element.我很困惑为什么height: 1%应该计算,auto因为父元素(html和body标签)没有明确设置其高度,但具有不同的高度,因为我们只是直接设置高度auto？
如果我们直接将其设置为height: auto,则显然只需将高度设置为子块级元素的高度,该高度不包括其下边距.
html {
background: pink;
}
body {
background: yellow;
}
div {
height: auto;
}
inner …推荐指数
解决办法
查看次数
具有Angular Material动态高度选项卡的可滚动内容元素
这个问题已经提出了Severa的 L T 输入法的进化过程中角料,但我没能做出任何V1.0.5的建议工作.整个页面(或Flex容器)滚动,将选项卡移出视图.
如何实现可滚动的全高内容元素？
<div flex>
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="one">
<md-content class="md-padding">
Bonus Karma用于整合自定义滚动条.
推荐指数
解决办法
查看次数
Flexbox 100%高度问题
我找到了以下链接......但它仍然无法帮助我......
如何使嵌套的flexbox工作
高度100%在flexbox列子上
如何使flexbox子项100%的父级高度？
我需要一个响应的整页,如下图所示:
使用页眉和页脚以及中间5列在剩余空间中均匀填充高度,然后当我进行媒体查询时,填写移动设备的屏幕,如下所示:
这是我到目前为止的代码......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto; …推荐指数
解决办法
查看次数