i have side nav , main content. both dynamic. problem when nav longer main content height set viewport height, , rest hidden, how can solve issue without ugly scroller navigation?
i need nav fixed
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>
this tricky because fixed position element removed document flow, height being ignored.
you absolutely position nav bar, use media query switch fixed positioning when window gets smaller.
or use javascript.
here ways others have done it:
Comments
Post a Comment