избавиться от полосы прокрутки

Question

Я пытаюсь сделать простой инструмент. Проблема в том, когда я нажимаю на нижние кнопки, подсказка выводит панель прокрутки страницы. В этом случае я хочу, чтобы наконечник инструмента должен был Выровнен в нижней части страницы без полосы прокрутки.

HTML:

<div class="main"> 
    <table> 
    <tr> 
     <td><button type="button">Click Me!</button></td> 
    </tr> 
    <tr> 
     <td><button type="button">Click Me!</button></td> 
    </tr> 
    <tr> 
     <td><button type="button">Click Me!</button></td> 
    </tr> 
    <tr> 
     <td><button type="button">Click Me!</button></td> 
    </tr> 
    <tr> 
     <td><button type="button">Click Me!</button></td> 
    </tr> 
    <tr> 
     <td><button type="button">Click Me!</button></td> 
    </tr> 
    <tr> 
     <td><button type="button">Click Me!</button></td> 
    </tr> 
    </table> 

<div class="pop">Text</div> 
</div> 

JS: 
$(".main").on("click", "button", function(){ 
    var top = $(this).offset().top; 
    $(".pop").show(".pop"); 
    $(".pop").css("top", top) 

}) 

$(".pop").click(function(){ 
    $(this).css("display", "none") 
}) 

Пример: http://codepen.io/anon/pen/jEdRoY

Answer 1

В этом случае, вы можете попробовать ниже CSS класса к вашему popup окну:

.pop{ 
    height:200px; 
    width:200px; 
    border:red solid 1px; 
    position:fixed; 
    display:none; 
} 

И это скрывает часть Div, которая является внешней экран.
Если вы не хотите его потерять, то, как вы сказали, не удалось достичь только CSS. Требуется JavaScript! что я имел в моем проекте, как,

Example of floating tool tip

Answer 2

Вы должны рассчитать высоту с помощью JavaScript.

Причина в CSS невозможна из-за столкновения между фиксированными height, top смещение и bottom офсет.

Но вы можете использовать следующий код для расчета переполнения и создания переключателя на основе сценария.

if(($("html").height() - (top + 400)) > 0) { 
    //set top offset 
} else { 
    //set bottom offset 
} 

Исходя из условия вы можете либо выбрать для установки top или bottom, чтобы избежать столкновения.

Here is the demo

Если вы хотите, чтобы вычислить height вместе с полями используйте outerHeight