相关疑难解决方法(0)
div为浏览器窗口的100%高度
我的网站有两列,现在背景颜色在左栏的最后一段内容(用于导航)结束.
我试过身高:100%,最小身高:100%; 似乎没有用.这是css.
.container {
width: 100%;
height:100%;
min-width: 960px;
background: #fbf6f0;
margin: 0 auto;
overflow: hidden;
}
#sidebar1 {
float: left;
position:absolute;
width: 20%;
height:100%;
min-width:220px;
background: none repeat scroll 0% 0% #007cb8;
z-index:9999;
}
推荐指数
解决办法
查看次数
Chrome会忽略列布局中的flex-basis
我遇到了麻烦的Chrome要注意的柔性基础部分flex: 1 1 25%的flex-direction: column布局.它在row布局中工作正常.
下面的代码片段演示了这个问题:黄色,蓝色和粉红色条形基于柔性基础50px,25%和75%,在列和行弯曲方向上都显示.
如果您在Firefox(或IE11或Edge)中运行它,列和行都按预期划分区域:
但是如果你在Chrome(47)或Safari(9.0.3)中运行它,左边的列布局似乎完全忽略了flex-basis - 条形的高度似乎与flex-basis无关:
左右之间的唯一区别是flex-direction.
.container {
width: 400px;
height: 200px;
display: flex;
background: #666;
position: relative;
}
.layout {
flex: 1 1 100%; /* within .container */
margin: 10px;
display: flex;
}
.row {
flex-direction: row;
}
.column {
flex-direction: column;
}
.exact {
flex: 1 1 50px;
background: #ffc;
}
.small {
flex: 1 1 25%;
background: #cff;
}
.large {
flex: …推荐指数
解决办法
查看次数
为什么这个文本区域不能在 Chrome 中采用其父级的完整高度？
考虑以下页面，该页面显示一行文本，<textarea>其下方带有 。
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
}
.outer {
background-color: #eee;
display: flex;
flex-direction: column;
height: 100%;
padding: 10px;
}
.expand {
flex-grow: 1;
}
textarea {
height: 100%;
width: 100%;
}<div class="outer">
<p>
Nice little wall of text.
</p>
<div class="expand">
<textarea></textarea>
</div>
</div>预期的行为是让文本区域占据文本行下方页面的剩余高度。使用flexbox，我可以使.expand元素占据页面的剩余高度。然而，尽管已height: 100%;设置在文本区域上，但它拒绝占据其父级的完整高度。
为什么这不起作用以及如何使文本区域填充其父级？
推荐指数
解决办法
查看次数
Chrome中的Flexbox - 如何限制嵌套元素的大小？
在Google Chrome中,我如何强制嵌套在flexbox成员中的元素(通过"flexbox的成员",我的意思是使用样式元素的子元素display:flex)将其大小限制为嵌套在其下的flexbox成员的大小？例如,假设我有以下内容:
<div style="display:flex; flex-direction:column; height:100vh;">
<div style="height:60px;">Static header</div>
<div style="flex: 1 1 0; overflow:hidden;">
<div style="overflow:auto; height:100%;" id="problem-is-here">
Lots and lots of content, way too much to fit in the viewport
</div>
</div>
</div>
因为div最外层的第一个孩子div具有恒定的高度,所以它最终高度为60px,并且因为第二个孩子的diva flex-grow为1,所以它获得剩余的可用空间(在这种情况下,100%的视口减去60px) .我可以确认,根据Inspect Element,这个元素的尺寸足够大,可以占据视口空间的其余部分.
在Firefox和IE11中,由于height:100%,最内层的element(id="problem-is-here")采用为其父级计算的高度.因此,由于它太小而无法显示其内容并被overflow设置为auto,因此它(而不是整个body)获得垂直滚动条.这就是我要的.
但是,在Chrome中,最内层元素的渲染高度足以包含其所有内容,这些内容的高度大于其父级.因此,由于其父级具有overflow:hidden,因此不会出现滚动条,并且无法访问多余的内容.当父高度由flexbox而不是CSS height属性确定时,如何告诉Chrome渲染此最内层元素的高度最多等于其父级的高度？请注意,我不能给内部div或其父级一个确定的height值,因为在我正在处理的应用程序中,其他flexbox成员的数量可能会有所不同.
注意:我已经尝试了其他答案中的一些建议,例如设置所有元素min-height:0而不是auto,或者确保flex-basis设置为0,但这些都没有奏效.看到
http://plnkr.co/edit/UBRcrNmR5iDbn3EXu6FI?p=preview
举例说明问题.(div …
推荐指数
解决办法
查看次数
Flex 高度在 Chrome 中不起作用
为了更好地查看问题，请在 Firefox 和 chrome 上的 html 代码下运行并查看差异。
该代码适用于所有浏览器，但不适用于 Chrome。问题是当您将 display 设置为flex和flex-directionto column，并将其中一个 flex 项设置flex-grow为 1 时。此 flex 项的内容不能将高度设置为 100%。
你能帮我在不使用 JavaScript 或 css Calc 函数的情况下解决问题吗？因为在实际项目中，事情远比这复杂得多。
h1 {
margin: 0;
padding: 0;
color: white;
}
div {
font-size: 38px;
color: white;
}<body style="margin: 0; padding: 0;">
<div style="height: 100vh; background: royalblue;">
<div style="display: flex; flex-direction: column; height: 100%;">
<div style="background: rosybrown; flex-grow: 0;">
This is first flex item
</div>
<div style="flex-grow: 1; background-color: …推荐指数
解决办法
查看次数
父项为 flex 项时的 100% 高度：Chrome 错误？
假设我们有这个标记：
<div id="outer">
<div id="middle">
<div id="inner">
</div>
</div>
</div>
和这个CSS：
#outer {
display: flex;
flex-direction: column;
background-color: white;
height: 300px;
}
#middle {
flex-grow: 1;
background-color: beige;
}
#inner {
background-color: black;
height: 100%;
}
我希望内部 div 跨越整个 300 像素，因为它应该与中间的 flex 项目一样高，而后者又会填充其父级。
这就是我在 IE、Edge 和 Firefox 上看到的行为。
在 Chrome 上，中间 div 仍然填充 300 像素，但内部 div 与没有任何高度属性时一样高。
看到这个小提琴：https : //jsfiddle.net/mhjussna/
这是 Chrome 中的一个错误，对吧？
推荐指数
解决办法
查看次数
Firefox 和 Chrome 上的 css-grid 呈现方式不同
我正在学习 css-grid 并且在使用网格区域和百分比大小的行/列时遇到了跨浏览器（Firefox 和 Chrome）渲染差异。在此处查看我对此问题的演示：https : //codepen.io/anon/pen/qQyKNO
请参阅下面包含 HTML/CSS 的 MVCE：
/* CSS Reset */
html
{
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body { margin: 0; }
.p1 { padding: 1rem; }
img { display: block; border: 0; width: 100%; height: auto; }
/* General Styles */
.navbar { background: white; border-bottom: 1px solid black; }
.logo { background: #212121;}
.sidebar { background: #212121; color: white; }
.main-content { background: white; }
.colophon { background: #1c1e1e; color: …推荐指数
解决办法
查看次数