javascript - 当主要内容距离导航较短时，固定侧导航的 CSS 部分会隐藏

Question

我有侧面导航和主要内容。两者都是动态的。问题是，当导航比主要内容长时，其高度设置为视口(viewport)高度，其余部分隐藏，如何解决这个问题，而不需要丑陋的滚动条导航？

我需要修复导航

section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

nav {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 250px;
      -ms-flex: 0 0 250px;
          flex: 0 0 250px;
}
nav ul {
  position: fixed;
}

main {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

<section>

  <nav>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
      <li>29</li>
      <li>30</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>34</li>
      <li>35</li>
      <li>36</li>
      <li>37</li>
      <li>38</li>
      <li>39</li>
      <li>40</li>
      <li>41</li>
      <li>42</li>
      <li>43</li>
      <li>44</li>
      <li>45</li>
      <li>46</li>
      <li>47</li>
      <li>48</li>
      <li>49</li>
      <li>50</li>
      <li>51</li>
      <li>52</li>
      <li>53</li>
    </ul>
  </nav>

  <main>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur tenetur tempore voluptatum quasi architecto accusamus sapiente quaerat sequi ratione optio eos, accusantium corrupti dolor aliquid similique culpa libero officiis atque?</p>
  </main>

</section>

Answer 1

这很棘手，因为固定位置元素已从文档流中删除，因此它的高度被忽略。

您可以绝对定位导航栏，然后在窗口变小时使用媒体查询切换到固定定位。

或者你可以使用Javascript。

以下是其他人完成此操作的一些方法:

• Fixed sidebar too tall for browser (bottom is getting cut off)
• CSS: sidebar with fixed position getting cut off
• How to stick fixed div of height more than viewport to body
• Problems when the element to be fixed is itself higher then the browser window height