相关疑难解决方法(0)
Flexbox Holy Grail布局:固定标题,固定左导航,流体内容区域,固定右侧边栏
我正在尝试使用Flexbox构建"Holy Grail"布局.
- 固定标题
- 固定,可折叠,可滚动左导航
- 灵活的内容区域
- 固定,可折叠,可滚动的右导航
见下文:
除了标题下方"app"区域的高度外,我一切正常.现在它是100vh(视口高度的100%),但这包括64px标题.
我尝试计算(100vh - 64px),但这与flex不相符.
这是我的基本HTML结构:
<main>
<header></header>
<app>
<nav>Left Nav</nav>
<article>Content</article>
<aside>Right Nav</aside>
</app>
</main>
和支持CSS:
main {
display: flex;
flex-direction: column;
}
header {
z-index: 0;
flex: 0 0 64px;
display: flex;
}
app {
flex: 1 1 100vh;
display: flex;
}
nav {
flex: 0 0 256px;
order: 0;
}
article {
flex: 1 1 100px;
order: 1;
}
aside {
flex: 0 0 256px;
order: 2;
}
推荐指数
解决办法
查看次数
高级渲染在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 …推荐指数
解决办法
查看次数
代码镜像块的高度在Chrome和Safari中并不相同
我想制作一个满足以下条件的布局:
1)它顶部有一个块height,其内容符合其内容
2)它下面有一个code-mirror和一个块,它完全填写页面的其余部分height.
我在这里做过一个傻瓜.问题是它运作良好Chrome 57.0.2987.133,但它不能很好地工作Safari 10.1:height它code-mirror是不够的; 它只显示76代码行而不是正确的80行.
有谁知道如何解决这一问题？
<style>
.rb {
display: flex;
flex-direction: column;
height: 100%;
}
.rb .container {
flex: 1;
display: flex;
width: 100%;
height: 100% /* new */
}
.rb .first-row {
border: 1px solid black;
/*flex: 0 0 60px;*/
}
.rb .CodeMirror {
flex: 1;
height: auto;
}
.rb .flex-preview {
flex: 1; …推荐指数
解决办法
查看次数
如何使用flexbox垂直对齐页面上的div
以下内容不是将div与浏览器选项卡中的文本垂直对齐(它正确地水平对齐):
<div style="height: 100%; display: flex; align-items: center; justify-content: center;">
<div>
Some vertical and horizontal aligned text
</div>
</div>怎么了？
推荐指数
解决办法
查看次数
Safari flexbox未正确包含其元素
我创建了一个简单的基于flexbox的页面,可以在Google Chrome(版本44.0.2403.157)中正确呈现,但在Safari(版本8.0.2(10600.2.5))中则不能.我已经添加了所有相关的前缀(我认为)并且花了很多时间查看检查器,但我似乎没有找到问题的原因.
该页面由一个容器和两个弹性行组成.第一个弹性行(标题)应该具有高度拉伸以适合其内容.第二个flex行(内容)应该具有浏览器高度减去标题高度的高度,此容器的溢出设置为滚动.当内容容器不必滚动时,代码工作正常,但只要内容容器有任何溢出,标题行就不再包含其内容.可能是什么导致了这个？
代码:
<html>
<head>
<style>
.box {
display: -ms-flexbox; /* IE 10 */
display: -webkit-flex; /* Safari 6 */
display: flex; /* Modern browsers */
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
flex-flow: column;
height: 100%;
width: 100%;
border: 2px solid;
}
.box .row {
flex: 0 1 30px;
border: 2px solid;
width: 100%;
}
.box .row.header {
-ms-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
}
.box .row.content {
-ms-flex: 1 1 auto;
-webkit-flex: …推荐指数
解决办法
查看次数
CSS Grid Row Height Safari Bug
我已经制作了一个1fr 1fr 1fr行的网格模板.在中间行,有一个内嵌图像列表.
在Chrome和Firefox中,图像尊重网格行的高度并正确适应.但是,在Safari 10.1.2和Safari TP 31中,似乎存在溢出行的图像组合而未适当缩放图像宽度.
也许我做错了什么？或者这是一个Safari bug？如果是这样,有解决方法吗？
Safari 10.1
Safari TP
Chrome 60
#grid {
height: 100vh;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
}
#thumbnailContainer {
position: inherit;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
img {
display: inline;
height: 100%;
width: auto;
}
header,
footer {
background-color: dodgerblue;
}<div id="grid">
<header>Header</header>
<div id="thumbnailContainer">
<img src="https://c2.staticflickr.com/8/7591/16903911106_b7ced9d758.jpg">
<img src="https://c1.staticflickr.com/9/8740/16927517701_810fcb2a7c.jpg">
<img src="https://c2.staticflickr.com/8/7637/16902583636_15138a68f0.jpg">
<img src="https://c2.staticflickr.com/8/7614/16927530091_6755845b13.jpg">
<img src="https://c1.staticflickr.com/9/8700/16741099010_d0ecd9df1f.jpg">
<img src="https://c1.staticflickr.com/9/8745/16927567841_74fd20d01d.jpg">
</div>
<footer>Footer</footer>
</div>推荐指数
解决办法
查看次数
高度:100%适用于Chrome,但不适用于Safari
我已经制作了一个在Chrome中完美运行的分离器.
但是,它在Safari中不起作用.但是,如果我们在改变高度.handle-inner,从100%到400px,我们会观察到分路器(从顶部向下400px)变为可拖动.这意味着它height:100%在Safari中不起作用.
有谁知道如何修改代码以使拆分器在Chrome和Safari中都能正常工作？
编辑1:
我做了一个更复杂的例子,它的结构与我的真实程序相似.在我的真实程序中,我没有固定高度500px,我使用整个屏幕,并且不想超过它.这是在Chrome中完美运行的分割器,但height:100%在Safari中不起作用.
下面是版本用height: 100vh.我们可以看到Chrome和Safari的高度都太高了.但是,我们不知道如何设置max-height.
推荐指数
解决办法
查看次数
最新的Chrome浏览器打破了Flexbox渲染
Chrome更新（73.0.3683.75）后，我的Flex渲染已完全损坏。
这个问题在SO的此处和此处都是已知的并已进行了讨论，但是由于我不太了解CSS和Flex，所以我无法理解它们的解决方案并无法在我的情况下使用。
我做了一个重复的问题。如果您使用Safari和Chrome来打开它，则在调整窗口大小时会注意到非常不同的行为。
我的代码（以前有效）有什么问题？
Here are two illustrations of the plunker:
Safari display (OK)
As you can see, when resizing the window, article items height is decreased and the global height stays at 100% without overflow. That's the expected behaviour.
Chrome display (NOT OK)
But in new Chrome version, article item height does not change when resizing the window, and a scrollbar is created.
<head>
<link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="4.1.3" …推荐指数
解决办法
查看次数
在flexbox中使用'height:100%'和'align-items:stretch'
我有一个带有直接子项的弹性箱align-items: stretch.
在这个flexbox的直接子项中,我想有一个div容器,它也使用其父级的全高(通过设置height: 100%).
但是,div容器不会伸展到其父级的100%高度,除非我也设置height: 100%了flexbox的直接子级.
这是一种虫子吗？我必须用align-items: stretchAND 设置flexbox的直接子项height: 100%以实现我想要的吗？这对我来说似乎是多余的.
这是一个例子:
html,
body {
margin: 0;
height: 100%;
}
.flexbox {
display: flex;
flex-direction: row;
height: 100%;
background-color: green;
}
.flexbox-child {
// height: 100%; uncommenting this will get it to work
align-items: stretch;
background-color: blue;
}
.flexbox-grand-child {
height: 100%;
background-color: red;
}<div class="flexbox">
<div class="flexbox-child">
<div class="flexbox-grand-child">
I want to be stretched till the bottom
</div>
</div> …推荐指数
解决办法
查看次数
如何将垂直滚动条应用于百分比高度的div？
我遇到过类似性质的无数问题,但我的情况有点不同; 我的外容器高度为100%而不是固定高度.
我div在容器里面有一堆s.它们溢出,我想有一个滚动条允许滚动.
这正是我想要实现的目标:http://jsfiddle.net/jcjw2jmo/
除此之外,我发布的链接有一个固定的height: 200px;.我希望有一个百分比高度.
我试过设定一个百分比height而max-height没有运气.这是我的进步:http://jsfiddle.net/k52eh0xr/
如何让两个小提琴具有相同的行为,而不是使用百分比？
非常感谢
PS.我知道这可以使用Javascript/jQuery完成,但我正在寻找一个只有CSS的解决方案
推荐指数
解决办法
查看次数