Question

我有侧导航和主要内容。两者都是动态的。问题是当导航比主要内容更长时，其高度设置为视口高度，其余隐藏，如何在没有丑陋滚动条的情况下解决此问题导航？

我需要修复导航

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

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

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

或者您可以使用Javascript。

以下是其他人做过的一些方法：

当导航的主要内容较短时，固定侧导航的Css部分隐藏

1 个答案: