代码之家 › 专栏 › 技术社区 › Mendes

在FlexBox中使用vh和vw的CSS问题

flexbox css html

Mendes · 技术社区 · 6 年前

我想建立一个主要内容的小组( PAGE CONTENT )以及一个右侧堆叠的命令按钮列表,带有标题。整个页面必须根据视口缩小或增大(这将在触摸屏上使用,因此横向/纵向视图需要按比例调整所有元素的大小)。

以下是我的HTML代码片段:

.panel-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 0px;
  margin: 0px;
}

.panel-container-left {
  flex-grow: 1;
  flex-shrink: 0;
}

.panel-container-right {
  justify-self: flex-end;
}

.title {
    background-color: grey;
    color: white;
    margin: 5px;
    width: 25vw;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stacked {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
}

.button {
  background-color: blue;
  color: white;
  margin: 5px;
  width: 25vw;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="panel-container">
  <div class="panel-container-left">
    PAGE CONTENT
    <div class="button">
      Button Page
    </div>
  </div>
  <div class="panel-container-right">
    <div class="title">
      TITLE
    </div>
    <div class="stacked">
    <div class="button">
      Button 1
    </div>
    <div class="button">
      Button 2
    </div>
    <div class="button">
      Button 3
    </div>
    <div class="button">
      Button 4
    </div>
    <div class="button">
      Button 5
    </div>
    <div class="button">
      Button 6
    </div>
    <div class="button">
      Button 7
    </div>
    <div class="button">
      Button 8
    </div>
    <div class="button">
      Button 9
    </div>
    <div class="button">
      Button 10
    </div>
    </div>
  </div>
</div>

2 回复 | 直到 6 年前

Gerard 6 年前

.panel-container {
  width: 100%;
  display: flex;
  /* flex-direction: row; NOT NECESSARY, IS THE DEFAULT */
  padding: 0px;
  margin: 0px;
}

/* NOT NECESSARY
.panel-container-left {
  flex-grow: 1;
  flex-shrink: 0;
}
*/

.panel-container-right {
  /* justify-self: flex-end; THIS DOES NOT EXIST */
}

.title {
    background-color: grey;
    color: white;
    margin: 5px;
    width: 25vw;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stacked {
    /* display: flex; 
    flex-direction: column; */
    width: 100%;
    height: 80vh; /* TITLE IS 10VH + A BIT EXTRA FOR THE EFFECT */
    overflow-y: scroll;
}

.button {
  background-color: blue;
  color: white;
  margin: 5px;
  width: 25vw;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="panel-container">
  <div class="panel-container-left">
    PAGE CONTENT
    <div class="button">
      Button Page
    </div>
  </div>
  <div class="panel-container-right">
    <div class="title">
      TITLE
    </div>
    <div class="stacked">
    <div class="button">
      Button 1
    </div>
    <div class="button">
      Button 2
    </div>
    <div class="button">
      Button 3
    </div>
    <div class="button">
      Button 4
    </div>
    <div class="button">
      Button 5
    </div>
    <div class="button">
      Button 6
    </div>
    <div class="button">
      Button 7
    </div>
    <div class="button">
      Button 8
    </div>
    <div class="button">
      Button 9
    </div>
    <div class="button">
      Button 10
    </div>
    </div>
  </div>
</div>

Gifron 6 年前

.panel-container-right {
  max-height: 100vh;
  overflow-y: scroll;
}