小编JP *_*eff的帖子
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; …4
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数