Css部分固定側導航隱藏時，主要內容短從導航

我有側導航和主要內容。兩者都是動態的。問題是，當導航長度比主要內容高度設置爲視口高度，其餘隱藏，我如何解決這個問題沒有難看的滾動到導航？Css部分固定側導航隱藏時，主要內容短從導航

我需要的資產淨值被固定

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>

來源

2016-01-24 user233232

因爲固定位置元件從文件流中除去這是棘手，因此它的高度被忽略。

您可以絕對定位導航欄，然後在窗口變小時使用媒體查詢切換到固定位置。

或者您可以使用Javascript。

這裏有一些人已經做到了：

來源

2016-01-24 17:28:12

有關這個網站你會發現有用的答案，[考慮的給予好評]（http://stackoverflow.com/help/someone-answers）。沒有義務。只是提高質量內容的一種方式。 –

Css部分固定側導航隱藏時，主要內容短從導航

回答

相關問題