相关疑难解决方法(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;
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

这是JSFiddle

flex-2-child 没有填写所需的高度,除非在以下两种情况下:

flex-2 高度为100%(这很奇怪,因为弹性项目默认为100%+ Chrome中存在错误)
flex-2-child 有一个绝对的位置也很不方便

这在目前的Chrome或Firefox中不起作用.

css css3 flexbox

Raz*_*Raz

2019 01-04

393
推荐指数

11
解决办法

53万
查看次数

在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>

Run Code Online (Sandbox Code Playgroud)

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;
}

Run Code Online (Sandbox Code Playgroud)

这是CodePen.

我想要它,所以红色.flex-child填充蓝色.flex.为什么不起作用height:100%？

css height google-chrome percentage flexbox

Cou*_*one

lucky-day

81
推荐指数

1
解决办法

8万
查看次数

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; …

Run Code Online (Sandbox Code Playgroud)

html css flexbox

JP *_*eff

2017 05-23

4
推荐指数

1
解决办法

1万
查看次数