Question

我要构建一个面板，其主要内容（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>

我无法使右侧面板正常工作。我需要保持所有按钮的大小相同，并且面板标题和面板按钮的大小相同。如果堆叠的按钮的高度增加，则需要滚动y，但与标题和面板按钮相比，不要超出屏幕边界或放宽其比例大小。

当前面板按钮正在缩小，以使所有10个按钮都处于可见状态，在这里我希望Y轴滚动按钮的尺寸与面板按钮的大小相同。

Answer 1

我已经记录了CSS中的所有更改。希望这会有所帮助。

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

Answer 2

如果我没看错，您应该尝试将右侧面板的最大宽度设置为100vh，然后添加溢出-y进行滚动。

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

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

2 个答案: