Как сделать высоту страницы "не менее заданной в процентах"?

Частый вопрос с не всегда очевидным решением, особенно если речь идёт о современной вёрстке разделами <div>, а не о классическом табличном макете сайта на теге <table>.

Проще всего решить проблему так:

• задать "разумную" (около 100%) высоту height для тегов <html> и <body>;
• подготовить класс-обёртку (у нас .wrapper), в котором указать ту же минимальную высоту min-height и куда можно засунуть дополнительные свойства фона (у нас - фоновый цвет) и отступов (у нас - по 5% ширины окна слева и справа); применить этот класс к разделу <div>;
• внутрь обёртки положить ещё один <div> с содержимым, который уже оформлять по своему вкусу (у нас - пустой стилевой класс .content).

Теперь если контент "не влазит по высоте" в окно, .wrapper всё равно будет растянут вниз. Если контента больше, чем высота экрана - появится нормальная полоса прокрутки, можно поэкспериментировать с приложенным листингом (сохранить как файл .html, HTML5).

Чтобы при переходе от страниц, которые по вертикали "больше" экрана к страницам, которые "меньше" не было некрасивых "скачков" полосы прокрутки и макета, включите прокрутку для <body> всегда с помощью указания overflow: scroll;.

<!doctype html>
<html>
<head>
    <meta charset=utf-8>
    <title>min-height в процентах</title>

<style type="text/css">
 html {
  height: 98%;
 }
 body {
  height: 98%;
  overflow: scroll;
 }
 .wrapper {
  margin: 0 5%;
  background-color: #ccc;
  min-height: 98%;
 }
 .content {

 }
</style>
</head>

<body>

<div class="wrapper">
 <div class="content">

<p>Уберите часть строк с цифрами, чтобы высота страницы стала меньше высоты экрана:</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>
11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p><p>
21</p><p>22</p><p>23</p><p>24</p><p>25</p><p>26</p><p>27</p><p>28</p><p>29</p><p>30</p><p>
31</p><p>32</p><p>33</p><p>34</p><p>35</p><p>36</p><p>37</p><p>38</p><p>39</p><p>40</p><p>
41</p><p>42</p><p>43</p><p>44</p><p>45</p><p>46</p><p>47</p><p>48</p><p>49</p><p>50</p><p>
51</p><p>52</p><p>53</p><p>54</p><p>55</p><p>56</p><p>57</p><p>58</p><p>59</p><p>60
</p>

 </div>
</div>

</body>
</html>

03.10.2016, 12:47 [4381 просмотр]