Требуется клиентHeight без заполнения

Мне нужно установить вертикальное управление диапазоном на основе доступной высоты в браузере. Я просто имею его, но я думаю, что есть какой-то тип проблемы заполнения/границы/поля, который я не могу обойти. Несмотря на то, что он имеет размеры в соответствии с высотой браузера, мой диапазон управления всегда уходит с нижней части страницы на несколько пикселей.Требуется клиентHeight без заполнения

Это, как я получаю рост:

var height = window.innerHeight 
|| document.documentElement.clientHeight 
|| document.body.clientHeight;

затем использовать его, чтобы установить высоту ползунка:

document.getElementById("slider").setAttribute('style', "height :" + height + "px");

Я знаю, что clientHeight возвращает высоту, включая обивку, так что я «Я думал, что мне просто нужно получить верхнее дополнение и вычесть его. Проблема заключается в том, что, когда я получаю отступы, как показано здесь, оно равно нулю (предупреждение выписывает 0px):

alert("top pad: " + window.getComputedStyle(document.documentElement, null).getPropertyValue('padding-top'));

Между тем, CSS для слайдера выглядит так, так что я не думаю, что его собственный отступы/границы/края отвечают:

.sliderStyle { 
    height: 860px; 
    width: 2%; 
    -webkit-appearance: slider-vertical; 
    padding-top: 0px; 
    margin: 0px; 
    border: 0px; 
}

Единственное в теле HTML является диапазон регулирования:

<input id="slider" class="sliderStyle" oninput='' onchange='' type="range" min="0" max="1000" step="1" value="0">

Вот файл в полном объеме:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Size Control to Browser</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
       <style type="text/css" media="screen"> 
      .sliderStyle { 
       height: 860px; 
       width: 2%; 
       -webkit-appearance: slider-vertical; 
       padding-top: 0px; 
       margin: 0px; 
       border: 0px; 
      } 
     </style> 

    <script type="text/javascript"> 
      function start() { 
       var height = window.innerHeight 
           || document.documentElement.clientHeight 
           || document.body.clientHeight; 
       alert('clientHeight: ' + height); 
       alert("top pad: " + window.getComputedStyle(document.documentElement, null).getPropertyValue('padding-top')); 
       alert("top margin: " + window.getComputedStyle(document.documentElement, null).getPropertyValue('margin-top')); 
       document.getElementById("slider").setAttribute('style', "height :" + height + "px"); 
      } 

    </script> 
    </head> 
<body onload='start()'> 
    <input id="slider" class="sliderStyle" type="range" min="0" max="1000" step="1" value="0"> 
</body> 
</html>

clientHeight предупреждение подтверждает, что высота меняется для разных браузера размеры
верхней колодки и верхнее поле предупреждения оба возвращают 0px

источник

2015-05-10 Larry Holze

Ох - и я не использую jQuery - просто прямо Javascript –

потребуется дополнительная информация, но ... возможно, обернуть еще один div вокруг него и использовать его высоту? – mike

Спасибо mike - Какую еще информацию вам нужно? Я редактировал, чтобы включить весь файл. Обертка его в div представляет ту же проблему: нужно сначала разбить div так, чтобы он точно соответствовал клиентской области, а это не так. Отходит немного вниз, как контроль диапазона. –

Чтобы ответить на ваш вопрос: использовать ниже JavaScript в качестве height переменной, вместо использования clientHeight или innerHeight (и установите тело 100vh). (См jsfiddle):

JS:

var style = window.getComputedStyle(document.body, null), 
    height = style.getPropertyValue("height"); 

console.log(height);

CSS:

body { 
    padding: 20px; 
    height: 100vh; 
} 

div { 
    height: 30px; 
}

HTML:

<div></div>

Что код делает получает высоту содержаниями корпус, который по существу является высотой тела без каких-либо обивка.

Единственная причина, я ставлю случайный div элемент там с заданной высотой 30px, чтобы показать, что console.log(height) будет выводить точно 30px, что высота все содержания в организме (в данном случае div является единственное, что есть в теле), не включая прокладку тела (который, согласно примеру CSS, который я использовал выше, составляет 20 пикселей). Вы можете просто удалить это div, как это здесь, например, цели.

JavaScript размещен в this answer to "Get the height of an element minus padding, margin, border widths", что также показывает устаревшую кросс-браузерную реализацию.

источник

2015-05-10 16:11:33

Высота клиента и его высота - это две разные вещи. Тело может быть установлено на 10 пикселей выше, если мы хотим, и во многих случаях оно больше, чем высота клиента. – GillesC

@gillesc, да, правда, спасибо, что указали это. Я изменил код, чтобы добавить '100vh' в качестве высоты тела. Будет ли это исправлять то, о чем вы говорите? –

Спасибо, Джош, но когда я протестировал этот ответ, я получил тот же результат, что и мой оригинал. Похоже, высота видового экрана (vh) включает в себя дополнение. Если бы это была высота EXculating padding, высота, рассчитанная в ответе, уменьшалась бы по мере увеличения заполнения тела, но это не так. Возвращенная высота, рассчитанная в ответе, не изменяется по мере изменения отступов кузова. –

Требуется клиентHeight без заполнения

ответ

Смежные вопросы