如何让div保持网格行的1fr，保持div子元素垂直滚动

问题描述 投票：0回答：1

我有一个有两行的网格，每行

1fr
。我希望每行内部的 
div
具有网格行的完整高度，但这些 
div
内部是其他包含垂直滚动元素的 
div
元素。我面临的问题是，如果 
div
包含许多元素，则 
div
父级会超出网格行的 
1fr
。我想避免这种情况并将高度保持为 1fr 并滚动其中的项目。

html

    <!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  type="text/css" rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="grid">
        <div class="container1">
            <div class="list">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>10</div>
                <div>11</div>
                <div>12</div>
                <div>13</div>
                <div>14</div>
                <div>15</div>
                <div>16</div>
                <div>17</div>
                <div>18</div>
                <div>19</div>
                <div>20</div>
                <div>21</div>
                <div>22</div>
                <div>23</div>
                <div>24</div>
                <div>25</div>
            </div>
        </div>
        <div class="container2">
            <div class="list">
                <div>26</div>
                <div>27</div>
                <div>28</div>
                <div>29</div>
                <div>30</div>
                <div>31</div>
                <div>32</div>
                <div>33</div>
                <div>34</div>
                <div>35</div>
                <div>36</div>
                <div>37</div>
                <div>38</div>
                <div>39</div>
                <div>40</div>
                <div>41</div>
                <div>42</div>
                <div>43</div>
                <div>44</div>
                <div>45</div>
                <div>46</div>
                <div>47</div>
                <div>48</div>
                <div>49</div>
                <div>50</div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

.grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    grid-template-rows: 1fr 1fr;
    border: 1px solid black;
    height: 100vh;
    width: 100vw;
}

.container1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    height: 100%;
    width: 350px;
    border: 1px solid red;
}

.container2 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    height: 100%;
    width: 350px;
    border: 1px solid blue;
}

.list {
    overflow-y: scroll;
}
css
1个回答
0
投票

考虑在 

min-height: 0
和 
.container1
上都有 
.container2
。这将使这些父元素保持网格的高度。要使 
.list
可滚动，请应用 
height: 100%
。

.grid {
  display: grid;
  grid-template-columns: 350px 1fr;
  grid-template-rows: 1fr 1fr;
  border: 1px solid black;
  height: 100vh;
  width: 100vw;
}

.container1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  height: 100%;
  width: 350px;
  border: 1px solid red;
  min-height: 0;
}

.container2 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  height: 100%;
  width: 350px;
  border: 1px solid blue;
  min-height: 0;
}

.list {
  height: 100%;
  overflow-y: scroll;
}
<!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 type="text/css" rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="grid">
    <div class="container1">
      <div class="list">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
      </div>
    </div>
    <div class="container2">
      <div class="list">
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
        <div>31</div>
        <div>32</div>
        <div>33</div>
        <div>34</div>
        <div>35</div>
        <div>36</div>
        <div>37</div>
        <div>38</div>
        <div>39</div>
        <div>40</div>
        <div>41</div>
        <div>42</div>
        <div>43</div>
        <div>44</div>
        <div>45</div>
        <div>46</div>
        <div>47</div>
        <div>48</div>
        <div>49</div>
        <div>50</div>
      </div>
    </div>
  </div>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.