Css-код, чтобы контент не прокручивался

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

css код:

 #foo {
      position: absolute;
      bottom: 0;
      background: red;
    }

сделай это фрагментом

— 16.03.2018 21:58

Что такое «строка выделена красным цветом»? Какой элемент имеет идентификатор foo? Вам нужно показать HTML в вашем примере.

— 16.03.2018 22:35

javascript html css twitter-bootstrap

16.03.2018 21:49

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

101

Ответы 4

В этом случае я бы использовал Javascript.

Исправление больше похоже на уведомление, я бы использовал трюки с уведомлениями Google css или трюки с уведомлениями javascript.

Я использую простой 2-х или 3-х секундный таймер с опцией постепенного исчезновения и удаления.

- ИЛИ ЖЕ -

используйте Javascript, чтобы изменить className элемента, для которого вы только что исправили. ClassName - это класс HTML, то есть CSS, поэтому вы можете делать красный цвет или что-то еще. Вы даже можете использовать функцию setTimeout, чтобы красный цвет тоже исчезал.

Пример

var SET_TIMEOUT = {};
var countdown = 1;

function update_fix(_THIS_){
  _THIS_.parentNode.style.background='rgba(230, 25, 25, '+countdown+')';
  SET_TIMEOUT['color_fade()'] = setTimeout(function(){color_fade(_THIS_);}, 2000);
}

function color_fade(_THIS_){
  countdown = countdown - .01;
  _THIS_.parentNode.style.background='rgba(230, 25, 25, '+countdown+')';
  if (countdown!=0){
  SET_TIMEOUT['color_fade()'] = setTimeout(function(){color_fade(_THIS_);}, 20);
}}

<TABLE CELLSPACING=1 CELLPADDING=1 border=1 STYLE='width:80%;'>
<TR><TD>1
<TR><TD>2
<TR><TD>3
<TR><TD>4
<TR><TD>5
<TR><TD>6<INPUT type=button value='click to test' onclick=update_fix(this);>
<TR><TD>7
<TR><TD>8
<TR><TD>9
<TR><TD>10
<TR><TD>11
</TABLE>

16.03.2018 21:58

Не используйте #foo css, попробуйте это вместо этого, если это поможет, вы можете потом самостоятельно создать класс css:

<center>
  <div style = "position: fixed; bottom: 0; left: 0; background-color: red; width: 100%;">
    <span style = "width:35%;float: left;">fixed</span>
    <span style = "width:15%;text-align: center;">sdf fixed</span>
    <span style = "width:15%;float: right;">frw fixed</span>
  </div> 
</center>

Надеюсь, это поможет тебе

16.03.2018 22:00

Может быть, это?

#foo {
  position: sticky;
  bottom: 0;
  background: red;
}

16.03.2018 22:05

Вы можете просто добавить тег <tfoot>

<tfoot>
  <tr id = "foo">
    <td style = "width:35%;text-align: center;" >fixed</td>
    <td style = "width:15%;text-align: center; " >
      sdf fixed
    </td>
    <td style = "width:15%;text-align: center;">
      frw fixed
    </td>
  </tr>
</tfoot>

и он будет закреплен на ножке, но вам нужно будет изменить фиксированную высоту корпуса стола.

Вот как будет на твоем примере

https://plnkr.co/edit/KoJcY4TxZS3DJeYgnbcs?p=preview

16.03.2018 22:08