Как сделать высоту страницы "не менее заданной в процентах"?
Частый вопрос с не всегда очевидным решением, особенно если речь идёт о современной вёрстке разделами <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 [4132 просмотра]