问题描述
我最近在布局中使用了CSS网格，但是现在我的项目仍需要支持import pyspark.sql.functions as f
df = spark.createDataFrame([(1,'2020-07-13 17:29:36')],['id','time'])
df.withColumn('time',f.to_timestamp('time','yyyy-MM-dd HH:mm:ss')) \
.withColumn('timediff',(f.col('time').cast('double') - f.lit(0.001)).cast('timestamp')) \
.show(10,False)
+---+-------------------+-----------------------+
|id |time |timediff |
+---+-------------------+-----------------------+
|1 |2020-07-13 17:29:36|2020-07-13 17:29:35.999|
+---+-------------------+-----------------------+
。
由于CSS网格似乎没有太多支持，并且由于该项目已经使用IE11 css，所以我正在尝试使用该网格进行简单的布局。
我正在尝试使用Bootstrap复制布局，就像使用Bootstrap一样，可以在this fiddle上看到
css grid所以我们得到了。
我现在正在尝试使用 //html
<div class='container'>
<div class='item1'>
aaaaaaaa
</div>
<div class='item2'>
bbbbbbbbbb
</div>
</div>
//css
html,body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.container {
min-height: 100%;
display: grid;
grid-template-rows: 1fr 50px;
grid-template-columns: 100%;
}
.item1 {
background: pink;
color: #444;
}
.item2 {
background: yellow;
}
做同样的事情，以便它可以在Bootstrap中工作。
我的第一个困惑是，似乎有一个flex和一个grid，所以我不确定该使用哪个以及为什么有两个系统。
我每次都尝试，而我却无法完成相同的工作。
使用网格，它说有一个IE，然后添加container（不用担心列）
所以我添加了
rows也可以看到此here。
我只是无法让页脚坐在底部。 <div class='cc container'>
<div class="item1 row align-items-stretch">
aaaaaaaa
</div>
<div class="item2 row align-items-end">
bbbbbbbbbb
</div>
</div>
html,body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.cc {
height: 100vh;
background: blue;
}
.item1 {
background: pink;
}
.item2 {
background: yellow;
}
似乎无能为力。
我刚刚看到
我用align-items-end尝试了类似的事情，即
flex但这里也没有运气。
我已经花了几个小时，但是我却无法使用它（即使在Chrome中也是如此）。 doco似乎只在谈论列布局，但是我需要行。
一个小问题是为什么要有grid和flex，但是我的主要问题是我应该使用Bootstrap grid，flex还是它们的组合来尝试实现这种“垂直”对齐（这可能吗？）？
解决方法
使用弹性布局，将.item1的{{1}}值设为1
flex这将迫使该元素占用所有剩余空间，并将页脚推到底部。