Задать вопрос

glu-dimaz

Ответы

  • Как сделать overflow-y для одной части блока, чтобы другая оставалась статичной?

    @glu-dimaz 
    <html>
<head> 
<style>
body{
overflow:hidden;
height:100vh;
}
.overflow{
min-height:100vh;
overflow-y:auto;
}
</style>
</head>

<body>
<div class=“overflow”>
Content 
<div>
</body>
</html>


    К примеру , задаем для body фиксированную высоту, которая равна высоте экрана. Внутри него создаем блок со свойством: overflow-y:auto , что позволяет скролить, в случае если контент больше высоты экрана. Таким образом - сама страница остается статичной и неподвижной, а скроллинг происходит только контента внутри блока div. 

    <html>
<head> 
<style>
body{
display:grid;
overflow:hidden;
height:100vh;
grid-template-columns:200px auto;
}
.no-overflow{

}
.overflow{
min-height:100vh;
overflow-y:auto;
}
</style>
</head>

<body>
<div class=“no-scroll”>
Leftblock 
</div>
<div class=“overflow”>
Content 
<div>
</body>
</html>


    Во втором примере, предварительно сделал сетку на стринце - первый блок (no-overflow) - останется статичным, относительно всей страницы во время скрола
    Ответ написан
    Комментировать
    Комментировать

  • Кто может помочь с написанием скрипта для компоновки блоков в расписании занятий?

    @glu-dimaz Автор вопроса
    В общем, надоело, сделал все как говорил автор предыдущего ответа в самом 1 сообщение, только слегка доработал:
    /// Уроки за день
					
$body .= '<table id="lessons-per-day">
			<tr style="border-top:none;">
				<td style="text-align:center;" colspan="500">
					'.date('d.m ',$time1).'<b>'.$_weekDN[date('w', $time1)]['title'].'</b>
				</td>
			</tr>';

for ($i = $time1; $i <= $time2; $i += 1800) {

	$d = date('Y-m-d-H-i', $i);
	$settime = date('H:i', $i);
	$st = explode(':',$settime);

	if ($st[1] == '30'){
		    	
		$body .= '<tr>';

	} else {

		$body .= '
			  <tr>
			        <td style="width:80px;padding:2px;border:1px solid #e7eaec;text-align:center;vertical-align:top;" rowspan="2">'.$settime.' </td>';

        }

	$body .= '<td style="border:1px solid #e7eaec;height:5px;"></td></tr>';
    
}

$body .= '</table>
		<div class="lessons-per-group" id="mask-per-day">
			<div class="lessons-per-grid-day">
				<div class="lessons-per-time"></div>
				<div class="lessons-per-content">';
		$z = 2;

		for ($i = $time1; $i <= $time2; $i += 1800) {

			$body .= '<div class="lessons-per-writes">';

			$d = date('Y-m-d-H-i', $i);

			if (isset($lessons[$d])) {

				foreach($lessons[$d] as $lesson){

					$z++;

					$height = $lesson['duration'] / 30 * 22;

					$time_end = $lesson['time'] + $lesson['duration'] * 60;

					$body .= '
						<div class="lessons-per-blocks">
							<div class="body-table-block-lesson" style="height:'.$height.'px;border-color:'.$_LTYPES[$lesson['type']]['color'].';z-index:'.$z.';" data-admin="'.$lesson['admin'].'" data-user="'.$lesson['user'].'" data-type="'.$lesson['type'].'" data-status="'.$lesson['status'].'" data-lessonid="'.$lesson['id'].'">

				            	<b>'.$_LSTATUSVG[$lesson['status']].' '.$_LTYPES[$lesson['type']]['title'].'</b> ('.date('H:i',$lesson['time']).' - '.date('H:i',$time_end).')
				            	'.$lsinfo.'
				            	</div>
		        		</div>';
				}

			}

			$body .= '</div>';

		}

		$body .= '</div>
				</div>
			</div>';


    Вот такие стили:

    .lessons-per-content{
 position: relative;
}
.lessons-per-writes{
 height: 22px;
 display: flex; 
    justify-content: space-between; 
}
.lessons-per-blocks{
 flex: 1;
 position: relative;
}
.body-table-block-lesson{
 position: absolute;
 width: 100%;
 border-width: 1px;
 padding: 1px;
 overflow: hidden;
 border-bottom-width: 6px;
 box-sizing: border-box;
 border-style: solid;
 background-color: white;
 border-bottom-left-radius: 5px;
 font-size: 0.8em;
}


    Ну и финальная картина:
    66ea7d2981c89791980311.png
    Не пуля в пулю - но структура сохранилась. Предложу еще при наведении, поднимать z-index до 200, чтобы урок был выше остальных. Буду сдавать сегодня... надеюсь, удовлетворю заказчика.
    Ответ написан
    Комментировать
    Комментировать