Question

我正在尝试通过使用flexbox来调整侧边栏中的两个导航（视口高度为100％）。

红色框应放置在其侧边栏父级的顶部
底部的蓝色框。

如果红色导航栏增大并且两者之间的间隔很小，则侧栏应在y轴上滚动。我尝试过的是在没有运气的情况下设置最高和最低保证金。有人可以帮我吗？

谢谢！

from pyspark.sql import SparkSession
import pandas as pd
import numpy as np
import pyspark.sql.functions as F

spark = SparkSession.builder.master("local").appName("Word Count").config("spark.some.config.option", "some-value").getOrCreate()

np.random.seed(0)
rows = 1000
df_pandas = pd.DataFrame({ 'A' : 1.,
   'B' : pd.Timestamp('20130102'),
   'C' : pd.Series(1,index=list(range(rows)),dtype='float32'),
   'D' : np.array([3] * rows,dtype='int32'),
   'E' : pd.Categorical(np.random.choice(["test","train","frog", "chicken"], rows)),
   'F' : 'foo' ,
   'G' : np.random.choice(['CM', 'NCM', 'FP'], rows),
   'H' : np.random.choice(['POP', 'POP N', 'POP SN', 'POP QP'], rows)})                                 

df_spark = spark.createDataFrame(df_pandas)
blocks = ['POP', 'POP N', 'POP SN', 'POP QP']

for block in blocks:
    df_spark_trimmed = df_spark.filter(~F.col('H').isin(block))
    counts = df_spark_trimmed.groupby('G').count()
    counts.show()

html, body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.sidebar {
  height: 100vh;
  width: 300px;
  background: #ccc;
  padding: 10px;
  overflow-y: scroll;
}

.sidebar__top {
  background: red;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sidebar__bottom {
  background: blue;
  height: 100px;
  margin-top: auto;
}

这是我的小提琴：http://jsfiddle.net/1dw7h2sp/1/

Answer 1

可能还有其他方法可以做到这一点。简而言之，我做了以下事情：

用能够增大大小（.sidebar__wrapper）的父级来包裹元素
设置min-height而非height，使其可以增长
如果要元素填充剩余空间，请使用flex-grow。

html, body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.sidebar {
  height: 100vh;
  width: 300px;
  background: #ccc;
  overflow-y: scroll;
  
  margin: 0;
  padding: 0;
}

/* set up a wrapper that can grow in size */
.sidebar__wrapper {
  height: auto;
  min-height: 100vh;
  width: 100%;
  background: #808080;
  
  padding: 10px;
  margin: 0;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sidebar__top {
  background: red;
  min-height: 200px;
  margin-bottom: 10px;
  
  /* this fills up the remaining space */
  flex-grow: 1;
}

.sidebar__bottom {
  background: blue;
  min-height: 100px;
}

<aside class="sidebar">
  <div class="sidebar__wrapper">
    <nav class="sidebar__top" contenteditable="true">
      <p>test</p>
    </nav>
    <nav class="sidebar__bottom"></nav>
  </div>
</aside>

顶部和底部带有两个flexbox导航栏的侧栏

1 个答案: