带 flex 的 css pos 系统布局答案

【问题标题】：css pos system layout with flex带 flex 的 css pos 系统布局
【发布时间】：2021-01-25 03:23:55
【问题描述】：

我确实想根据这张图片开发一个 POS 系统布局。

整个布局应该适合显示高度。

项目列表的溢出应该是可滚动的。

右侧的两个框应占显示高度的 50%，第一个框应具有滚动功能。

这是我到目前为止所做的。如何使用 CSS 实现这一点？

body{
  min-height: 100vh;
  background-color:darkgray;
  margin:0
}
.container{
  display: flex;
  background-color:green;
  height:'100%';

}

.items-list{
  background-color:burlywood;
  flex:3
}

.order-details{
  background-color:coral;
  flex: 1;
}

.display-total{
  background-color:blueviolet
}

.item{
  background-color:white;
  padding: 1rem;
  border:1px solid black;
  margin-left: 1rem;
  margin-right: 1rem;

}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="items-list">
        <p class="item">item 1</p>
        <p class="item">item 2</p>
        <p class="item">item 3</p>
        <p class="item">item 4</p>
        <p class="item">item 5</p>
        <p class="item">item 6</p>
        <p class="item">item 7</p>
      </div>

      <div class="order-details">
        <div class="cart-items">
          <p class="item">item 1</p>
        </div>
        <div class="display-total">Total</div>
      </div>
    </div>
  </body>
</html>

【问题讨论】：

顺便说一句，“Anyhelp”不是一个词，也不是一个句子。

标签： css flexbox

【解决方案1】：

关键在于将overflow-y: scroll 分配给可滚动的div，然后确保它们的高度受到限制，以便强制滚动。

这是一个示例 sn-p：

body {
  height: 100vh;
  background-color: darkgray;
  margin: 0
}

.container {
  display: flex;
  background-color: green;
  height: 100%;
}

.items-list {
  background-color: burlywood;
  flex-basis: 50%;
  overflow-y: scroll;
}

.order-details {
  display: flex;
  flex-direction: column;
  background-color: coral;
  flex-basis: 50%;
}

.cart-items {
  flex-basis: 50%;
  overflow-y: scroll;
}

.display-total {
  background-color: blueviolet;
  flex-basis: 50%;
}

.item {
  background-color: white;
  padding: 1rem;
  border: 1px solid black;
  margin-left: 1rem;
  margin-right: 1rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="container">
    <div class="items-list">
      <p class="item">item 1</p>
      <p class="item">item 2</p>
      <p class="item">item 3</p>
      <p class="item">item 4</p>
      <p class="item">item 5</p>
      <p class="item">item 6</p>
      <p class="item">item 7</p>
    </div>

    <div class="order-details">
      <div class="cart-items">
        <p class="item">item 1</p>
        <p class="item">item 2</p>
        <p class="item">item 3</p>
        <p class="item">item 4</p>
      </div>
      <div class="display-total">Total</div>
    </div>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

你喜欢这个吗？我为可滚动添加了overflow-y: scroll;，
我在.display-total 和cart-items 中添加了height: 50%;，所以两个框将占据50% 的高度。

它有效！

body{
  min-height: 100vh;
  background-color:darkgray;
  margin:0
}
.container{
  display: flex;
  background-color:green;
  height: 100%;
}

.items-list{
  background-color:burlywood;
  flex:3;
  overflow-y: scroll;  /* I added this */
}

.order-details{
  background-color:coral;
  flex: 1;
}

.display-total{
  background-color:blueviolet;
  height: 50%; /* I added this */
}

.item{
  background-color:white;
  padding: 1rem;
  border:1px solid black;
  margin-left: 1rem;
  margin-right: 1rem;

}
.cart-items {
  overflow-y: scroll;  /* I added this */
  height: 50%;  /* I added this */
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="items-list">
        <p class="item">item 1</p>
        <p class="item">item 2</p>
        <p class="item">item 3</p>
        <p class="item">item 4</p>
        <p class="item">item 5</p>
        <p class="item">item 6</p>
        <p class="item">item 7</p>
      </div>

      <div class="order-details">
        <div class="cart-items">
          <p class="item">item 1</p>
        </div>
        <div class="display-total">Total</div>
      </div>
    </div>
  </body>
</html>

【讨论】：