Как прокрутить слой?

Question

[Дмитрий]

Всем, привет. Бьюсь который день с данной проблемой, не могу решить. Помогите пожалуйста. Итак, есть сайт, на котором есть кнопка, при нажатии на которую, сбоку появляется слой (избранное), в котором отображаются определенные данные из БД (Картинка и текст). Сделал вывод данных через цикл, но проблема вот в чем, данные выводятся, но когда их становится больше, чем может уместиться на страницу, то они не отображаются (вернее отображаются, но я их не вижу, пока не уменьшу масштаб страницы). Подскажите как сделать так, что бы их модно было прокручивать.
Вот сам код:

<div id="Layer3" style="display:none;text-align:center;overflow-y: auto; /* Добавляем полосы прокрутки сбоку*/ 
overflow-x: hidden; /* Убираем полосы прокрутки снизу*/ 
min-height: 90%; /* Высота блока */">
<div id="Layer3_Container" style="width:300px;position:relative;margin-left:auto;margin-right:auto;text-align:left;">
<div id="wb_Text55" style="position:absolute;left:88px;top:19px;width:129px;height:19px;z-index:217;text-align:left;">
<span style="color:#000000;font-family:'Century Gothic';font-size:16px;letter-spacing:2.07px;"><strong>ИЗБРАННОЕ</strong></span></div><br><br><br><br>

<?php 
/// Вывод результатов избранного.

$db = mysqli_connect($mysql_server, $mysql_username, $mysql_password) or die('Failed to connect to database server!<br>'.mysqli_error($db));
mysqli_select_db($db, $mysql_database) or die('Failed to select database<br>'.mysqli_error($db));
$name=htmlspecialchars(addslashes(stripslashes($_COOKIE["name"])));
$izbr = mysqli_query($db, "SELECT * FROM `izbr` WHERE `name` = '$name'");

if (mysqli_num_rows($izbr)>0){
    
    $req = mysqli_query($db, "SELECT * FROM `izbr` WHERE `name` = '$name' ORDER BY `id` DESC");
	if (mysqli_num_rows($req)>0){
        While($izb = mysqli_fetch_array($req)){
            $hors = mysqli_query($db, "SELECT * FROM `horses` WHERE `id` = '$izb[horse]'");
            $bhp = mysqli_fetch_array($hors);            
            echo '&nbsp;&nbsp;<img alt="&#1048;&#1084;&#1103; &#1083;&#1086;&#1096;&#1072;&#1076;&#1080;" class="image" src="image/katal/'.$bhp['imag'].'/1.jpg" style="left:39px;width: 95%; height: 95%;"><br>';
            echo '<div style="text-align:center;">
                  <span style="color:#000000;font-family:Century Gothic;font-size:13px;"><b>'.$bhp['name'].'</b></span></div><br><br>';
	}
    }
}
    ?>

</div>
</div>

Comments

[Артур Карапетян]

скорее всего проблема в CSS

[Дмитрий]

Артур, Что для этого нужно?

[Артур Карапетян]

Дмитрий, Для начала - показать CSS, я предполагаю ,что в контейнер просто нужно добавить overflow-y: auto

[Дмитрий]

Артур, Вот:

#Layer3
{
   background-color: #FFFFFF;
   background-image: none;
}
#Layer3_panel
{
   background-color: #FFFFFF;
   background-image: none;
   display: none;
   position: absolute;
   position: fixed;
   top: 0;
   height: 100%;
   width: 300px;
   z-index: 9999;
}

[Ankhena]

overflow: auto или скролл при указанной высоте блока.

Остальное после появления кода в песочнице jsfiddle.net Только уже сгенерированный html и css той ситуации которая работает не так, как вам хочется. Без вот того дрыбадана из php.

[Дмитрий]

Ankhena,

Остальное после появления кода в песочнице jsfiddle.net Только html и css той ситуации которая работает не так, как вам хочется. Без вот того дрыбадана из php.

вот тут не очень понял. Можете написать, что и где добавить или изменить?

[Артур Карапетян]

Дмитрий, В #Layer3_panel добавьте overflow: auto

[Дмитрий]

Артур, Отлично, помогло)))) Спасибо большое. А подскажите, можно сделать так, что бы она прокручивалась, а полоса не отображалась?

[Ankhena]

Дмитрий, засунуть в другой див, который будет меньше вашего на высоту и ширину прокрутки и overflow-hidden

[Дмитрий]

Ankhena, Не понял.

[Ankhena]

Дмитрий, как-то так: https://jsfiddle.net/jgLhus2w/ скрольте