那些遇到过的问题

相关疑难解决方法(0)

嵌套Flexbox 100%高度在Safari中不起作用

我是Flexbox的新手,我正在尝试用它来创建一个带有固定页眉,固定页脚和填充页眉和页脚之间可用空间的内容区域的布局.内容区域是一个可滚动区域,有3个面板(div),每个面板的高度为100%.出于演示目的,我将a,b,c(在其中将它们称为Panel a,Panel b和Panel c)文本放在每个面板的顶部.

在Firefox v39中,面板a,b和c占据了可滚动容器的整个高度.

在Safari(v 8.0.6(10600.6.3))中,每个面板的高度都比容器高一点.如果滚动到最后一个面板(面板c),当内容完全滚动时,标题"c"不再显示.Firefox不是这种情况.

我想要的行为是Firefox中的行为.

这是codepen.

<head lang="en">
    <meta charset="UTF-8">
    <title>Sample</title>
    <style>
        html, body {
            height: 100%;
            width: 100%;
            font-size: 100%;
            margin: 0px;
            font-family:open-sans;
            font-style: normal;
            font-weight: 400;
        }
        *, *:before, *:after{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;

        }
    </style>
</head>

<body>
    <div style="height: 100%; width: 100%; ;display: -webkit-flex; display: flex; -webkit-flex-flow: column;  flex-flow: column;">
        <div style="width:100%; min-height: 50px;">
            header<br>header<br>header<br>
        </div>
        <div style="display: -webkit-flex; display: flex; -webkit-flex-flow: column; flex-flow: column; …
Run Code Online (Sandbox Code Playgroud)

css3 flexbox

pb1*_*111
2015 07-15
6
推荐指数
1
解决办法
2万
查看次数

使flex项具有100%高度和溢出:滚动

我想要一个弹性项目占据剩余高度的100%并显示overflow: scroll条形.

看起来问题来自于我#userList占用了100%的窗口高度而不占用剩余空间.

body {
  display: flex; 
  flex-direction: column; 
  min-height: 100%; 
  margin:0px;
}
.wrapper {
  display: block; 
  flex: 1 1 auto; 
  display: flex;
  flex-direction: row; /
}

#chatContainer {
	background: orange;
	width: calc(100% - 350px);
	display: flex;
	flex-direction: column;
}
#tabs{
	background-color: red;
	flex: 1 1 0px;
	display: flex;	
}
#usersContainer {
  flex: 1 1 0; 
  display:flex;
  flex-direction:column;
}
#userListWrapper {
	background-color:pink;
	flex: 1 1 auto;
	display:flex;
}
#userList {
    -webkit-flex: 1 1 auto;
    overflow: auto; …
Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

yar*_*rek
2016 02-09
6
推荐指数
1
解决办法
5447
查看次数

Chrome中的Flexbox容器不会达到100%的高度

另一个Flex容器内的Flexbox列容器在Chrome中不会达到100%的高度,但在Firefox和Edge中都可以.

Codepen示例

.container {
  display: flex;
  flex-direction: column;

  height: 100%;
  width: 100%;

  .inside-container {
    display: flex;
    flex-direction: column;

    height: 100%;

  }
}
Run Code Online (Sandbox Code Playgroud)

css firefox google-chrome css3 flexbox

fot*_*ton
2016 03-25
6
推荐指数
1
解决办法
3万
查看次数

在chrome中忽略弹性项目内的最小高度

我有一个带有flex-direction: row柔性物品的弹性容器.flex项目本身会有各种高度,但由于默认设置align-items: stretch,它们都填充了Flex容器的高度.在我的具体用例中,这是完美的.

问题是我<div>在每个flex容器中都有这些,我需要它们占据其父级的全部高度.我以为我可以min-height: 100%坚持下去.此解决方案适用于Firefox和Internet Explorer,但出于某种原因不适用于Google Chrome.

这是一个演示问题的代码片段.如果你在chrome上查看它,你会发现较短的白色.card没有填满紫色.card_container.但是,如果你在IE或FF上查看它,它将填满父容器的高度.

#grid {
  background: rgba(255,0,0,0.2);
  padding: 10px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;      
}

.card_container {
  width: 300px; 
  background: rgba(0,0,255,0.2);
  margin: 15px;
  padding: 5px;
}


.card {
  background: white;
  min-height: 100%;    /* <- Why isn't this working? */
}
Run Code Online (Sandbox Code Playgroud) 
<div id="grid">
  <div class="card_container">
    <div class="card">
      This text is very short.
    </div>
  </div>
  <div class="card_container">
    <div class="card">
      This text is very long. …
Run Code Online (Sandbox Code Playgroud)

html css google-chrome flexbox

Luk*_*uke
2016 07-10
6
推荐指数
0
解决办法
1174
查看次数

align-items：居中会使img消失

因此，使用网格时，当我没有align-items: center;img时，align-items: center;它可以正常显示，但是一旦添加，它就会突然消失。是什么导致此问题？

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100px;
}

img {
  display: block;
  max-height: 100%;
  margin: 0 auto;
}

.align {
  align-items: center;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="grid">
  <div>
    <span>text</span>
  </div>
  <div>
    <img src="http://via.placeholder.com/650x1050" />
  </div>
</div>

<div class="grid align">
  <div>
    <span>text</span>
  </div>
  <div>
    <img src="http://via.placeholder.com/650x1050" />
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

这似乎是Chrome问题。它也不适用于Firefox上的img。

html css css3 css-grid

A. *_*Lau
2017 11-14
5
推荐指数
1
解决办法
796
查看次数

CSS Grid在Firefox和Safari中不起作用

我正在构建一种后网格滑块，它将在CSS网格中显示4个框。我构建了所有内容，并且它按预期工作，但在Firefox中不起作用。

Firefox和Safari都无法显示网格高度。它们导致0或1px。为了解决这个问题，我使用display：flex和flex-flow设置为换行。这在Safari中有效，但在Firefox中无效。当我从容器中删除flex时，它可以在Firefox中运行，但随后不能在Safari中运行。

Edge和Chrome都可以。我迷失在寻找解决方案并尝试解决它的问题，但结果仍然相同。

我正在使用padding-top和position absolute来具有“按比例”响应的网格及其项目。

谢谢您的回复。 https://codepen.io/Mariopa/pen/ELjqYr

的HTML

<div class="post-grid-slider">
  <div class="post-grid-wrapper">
    <div class="post-grid">
      <div class="post-grid__item">
        <a href="#" target="_self" rel="nofollow" class="post-grid__link">  
         <div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/Inoutic-1024x683)"></div>          
          <div class="subcategory"><span >Category</span></div>
          <h2 class="post-grid__title">Title</h2>
        </a>
      </div>
      <div class="post-grid__item">
        <a href="#" target="_self" rel="nofollow" class="post-grid__link">  
          <div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/kinds-of-food-3320746_1920-1024x683)"></div>         
          <div class="subcategory"><span>Category</span></div>
          <h2 class="post-grid__title">Title</h2>
        </a>
      </div>
      <div class="post-grid__item">
        <a href="#" target="_self" rel="nofollow" class="post-grid__link">  
          <div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/leaf-397870_1920-1024x768)"></div>  
          <div class="subcategory"><span>Category</span></div>
          <h2 class="post-grid__title">Title</h2>
        </a>
      </div>
      <div class="post-grid__item">
         <a href="#" target="_self" rel="nofollow" class="post-grid__link">  
           <div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/grape-hyacinth-1024x679)"></div>          
          <div class="subcategory"><span>Category</span></div>
          <h2 class="post-grid__title">Title</h2>
        </a>
      </div>
    </div> …
Run Code Online (Sandbox Code Playgroud)

css css3 flexbox css-grid

Sha*_*ead
2018 04-22
5
推荐指数
1
解决办法
2110
查看次数

浏览器无法将相对单位（百分比）应用到由 fr 设置的空间

问题详情

我写了这样的代码。在这里，形象应该是由保留的空间传播fr，因为width，height和object-fit性质的工作。所以我认为第二个的文字.item会溢出。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  background: red;
  gap: 10px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="item">
    <img src="https://unsplash.it/450/450">
  </div>
  <div class="item">
    <img src="https://unsplash.it/450/450">
    text
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

在 Firefox 中，这会导致文本用完，

在此处输入图片说明

Chrome 并非如此。

在此处输入图片说明

此外，将图像包装在div元素中而不是仅在网格项下方将解决该问题。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  background: red;
  gap: 10px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} …
Run Code Online (Sandbox Code Playgroud)

css firefox google-chrome flexbox css-grid

作者
2020 01-06
5
推荐指数
1
解决办法
192
查看次数

为什么 CSS 百分比 (%) 高度应用于 Flex 元素的孙子元素？

我正在尝试检查 CSS 100% height 属性如何工作。但有一件事我无法理解。

为什么 100% 高度在.flex-grand-child(Chrome) 上完美运行？.flex-child有高度属性吗？那为什么它还能工作？？？

这是JSFiddle

html, body {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flex-parent {
  flex: 1 0 auto;
  display: flex;
}

.flex-child {
    width: 300px;
}

.flex-grand-child {
   height: 100%;
   background-color: green;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
    <div class="flex-parent">
        <div class="flex-child">
          <div class='flex-grand-child'></div>
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

html css flexbox

Ива*_*нко
2020 05-22
5
推荐指数
1
解决办法
563
查看次数

Chrome会忽略列布局中的flex-basis

我遇到了麻烦的Chrome要注意的柔性基础部分flex: 1 1 25%的flex-direction: column布局.它在row布局中工作正常.

下面的代码片段演示了这个问题:黄色,蓝色和粉红色条形基于柔性基础50px,25%和75%,在列和行弯曲方向上都显示.

如果您在Firefox(或IE11或Edge)中运行它,列和行都按预期划分区域:

Firefox截图

但是如果你在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: …
Run Code Online (Sandbox Code Playgroud)

css webkit google-chrome css3 flexbox

med*_*nds
2016 04-05
4
推荐指数
1
解决办法
6852
查看次数

高度:100%无法在flexbox中使用flex-grow进行工作

蓝色框应该是100%的高度.当我设置像素高度时,它可以工作div.a,但不幸的是,这不是现实世界案例的选项.

这可能解释了一切:http: //codepen.io/anon/pen/jrVEpB

.a{
  background-color:red;
  display:flex;
}
.b1{
  flex-grow:0;
  background-color:green;
}
.b2{
  flex-grow:1;
  background-color:yellow;
  height:100%;
}

.c{
  height:100%;
  background-color:blue;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="a">
  <div class="b1">
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
    
  </div>
  <div class="b2">
      <div class="c">
          miksi et ole full height saatana
      </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

Sep*_*420
2016 06-21
4
推荐指数
1
解决办法
1590
查看次数

标签 统计

css ×9

flexbox ×9

css3 ×7

html ×5

google-chrome ×4

css-grid ×3

firefox ×2

webkit ×1