Перейти из форума на сайт.

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в on-line?
Вход • Забыли пароль? • Первый раз на этом сайте? • Регистрация
Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Фиксация элемента внизу страницы (CSS)

Модерирует : Cheery

 Версия для печати • Подписаться • Добавить в закладки
Страницы: 1 2

Открыть новую тему     Написать ответ в эту тему

D1D1D1D

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Можно ли настроить стиль, чтобы действие по классу приводило к фиксации элемента внизу, а не вверху? —

Код:
.fixed {
    border-bottom: 0px solid #3F4041;
    POSITION:fixed;
    Z-INDEX:1000;
    margin:0px;
    margin-right:0px!important;
    padding-right:0px!important;
    right: 0px;
    bottom: 0px;
    //POSITION:absolute;
    top:expression(document.getElementsByTagName( 'body' )[0].scrollTop + 'px');
    padding:0px;
    width: 100%;
    background-color:#ffffff;
}
 
Всего записей: 1367 | Зарегистр. 05-04-2010 | Отправлено: 12:13 09-10-2017 | Исправлено: D1D1D1D, 23:42 09-10-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D
Вопросы по CSS
 
1) убрать все, что относится к top
2) вы уж определитесь какой у вас position - fixed или absolute
Всего записей: 15096 | Зарегистр. 20-09-2014 | Отправлено: 16:04 09-10-2017
D1D1D1D

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
 
1) Вроде, если убрать top:expression... тогда нечему будет обеспечивает фиксацию, в таком виде его и придумали в студии Лебедева.
2) POSITION должен был выглядеть так //position:absolute; — это я в процессе тестов напутал.
Всего записей: 1367 | Зарегистр. 05-04-2010 | Отправлено: 23:42 09-10-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D

Цитата:
это я в процессе тестов напутал.

тогда для fixed вам не нужны никакие expression и так далее, потому что fixed это позиция относительно видимой части окна (без разницы есть скролл или нет).
 
поэтому вверху будет
{
position: fixed;
top: 0;
}
 
а внизу
{
position: fixed;
bottom: 0
}
 
если у вас не так, значит что то еще перекрывает стили - https://jsfiddle.net/4w278njq/
 
ps: и, кстати, // не работает как комментарий в css
Всего записей: 15096 | Зарегистр. 20-09-2014 | Отправлено: 00:01 10-10-2017 | Исправлено: Mavrikii, 00:37 10-10-2017
D1D1D1D

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Спасибо, только мне надо было для работы из CHM-файла — в т.ч. на XP, в старых IE, хотя бы с шестой версии, потому что CHM, как известно, использует IE. А этот фрагмент кода я брал отсюда: https://www.artlebedev.ru/technogrette/html/fixed_in_ie/
Всего записей: 1367 | Зарегистр. 05-04-2010 | Отправлено: 01:46 10-10-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D
http://caniuse.com/#feat=css-fixed
работает с 7 версии IE, есть в XP начиная с SP2
 
но я бы не занимался таким извратом..
тем более раз у вас работает с position: fixed и наверху, значит поддерживается
 
если уж хочется через expression (и position: absolute), то что то такое
bottom: expression(document.body.scrollHeight - document.body.scrollTop - window.height + 'px');  
Всего записей: 15096 | Зарегистр. 20-09-2014 | Отправлено: 02:01 10-10-2017 | Исправлено: Mavrikii, 02:14 10-10-2017
D1D1D1D

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Получается, приспособить тот код по ссылке на отображение фиксированного — снизу, не представляется возможным?
Всего записей: 1367 | Зарегистр. 05-04-2010 | Отправлено: 02:17 10-10-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D

Цитата:
не представляется возможным?


Цитата:
если уж хочется через expression (и position: absolute), то что то такое  
bottom: expression(document.body.scrollHeight - document.body.scrollTop - window.height + 'px');  

 
ps: вот корректный класс (но изврат невозможный)

Код:
.bottom {
  position: absolute;
  bottom: auto;
  top: expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight - (parseInt(this.currentStyle.marginTop, 10) || 0) - (parseInt(this.currentStyle.marginBottom, 10) || 0)));
}

 
ну и полный набор

Код:
/*Make position:fixed work in IE6!*/
 
.fixed-top    /* position fixed Top    */{position:fixed;bottom:auto;top:0;}
.fixed-bottom /* position fixed Bottom */{position:fixed;bottom:0;top:auto;}
.fixed-left   /* position fixed Left   */{position:fixed;right:auto;left:0;}
.fixed-right  /* position fixed right  */{position:fixed;right:0;left:auto;}
 
* html,* html body   /* IE6 Fixed Position Jitter Fix */{background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top    /* IE6 position fixed Top        */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right  /* IE6 position fixed right      */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
* html .fixed-bottom /* IE6 position fixed Bottom     */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left   /* IE6 position fixed Left       */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
Всего записей: 15096 | Зарегистр. 20-09-2014 | Отправлено: 02:17 10-10-2017 | Исправлено: Mavrikii, 02:38 10-10-2017
D1D1D1D

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
У меня почему-то в IE 11 следующий код отрабатывает как надо

Код:
 
.fixed {
  position:fixed;
  position: absolute;  
  bottom: 0;  
  top: expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight - (parseInt(this.currentStyle.marginTop, 10) || 0) - (parseInt(this.currentStyle.marginBottom, 10) || 0)));  
}
 

но после компиляции в CHM, элемент снова фиксируется вверху страницы. С чем это может быть связано?
Всего записей: 1367 | Зарегистр. 05-04-2010 | Отправлено: 17:33 10-10-2017 | Исправлено: D1D1D1D, 17:34 10-10-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D

Цитата:
  position:fixed;  
  position: absolute;  

снова комменты не написали? нельзя использовать и то и то
или расчет что если одно не поддерживается, то включится иное?
F12 в IE, далее в правой части (или как на картинке) окошка можно выбрать версию движка, там выбрать 7 и посмотреть.

Цитата:
On Windows Vista and later (I tested 7, 8, and 8.1), the HTML Help Viewer uses IE 7, even if you have a more recent version of Internet Explorer installed, and even if Windows itself comes bundled with a more recent version of Internet Explorer.
 
On Windows XP and prior, if the user has IE 7 or prior installed, then the HTML Help Viewer uses whichever version of IE the user has installed. If the user has IE 8 installed, then the HTML Help Viewer will use the IE 7 engine, even if the user never installed IE 7. IE 9 and later cannot be installed on Windows XP or prior.
 
So it seems HTML Help will be fovever stuck with IE 7.

 
   
так можно тестировать как будет выглядеть то или иное под разными IE
Всего записей: 15096 | Зарегистр. 20-09-2014 | Отправлено: 19:48 10-10-2017
D1D1D1D

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
или расчет что если одно не поддерживается, то включится иное?

Да, я хотел для старых и новых IE более-менее универсальный вариант. Так понимаю, варианты стилей надо в разных классах прописывать?
 
Всего записей: 1367 | Зарегистр. 05-04-2010 | Отправлено: 21:15 10-10-2017 | Исправлено: D1D1D1D, 21:26 10-10-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D

Цитата:
 Так понимаю, варианты стилей надо в разных классах прописывать?

нет, одинаковые атрибуты перекрываются в том порядке, в котором записаны классы у элемента (плюс там есть правила приоритета).
вам нужны "хаки" под разные старые версии браузеров.
я бы игнорировал IE6 вообще, так как даже XP без SP2/SP3 вряд ли будет установлен.
Всего записей: 15096 | Зарегистр. 20-09-2014 | Отправлено: 21:40 10-10-2017
D1D1D1D

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Судя по данным движков, хаки не срабатывают (про хаки):

Код:
 
<!--[gt IE 6]>
position: fixed;  
bottom: 0;  
<![endif]-->
 
<!--[if lt IE 6]>  
  position: absolute;  
  bottom: auto;  
  top: expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight - (parseInt(this.currentStyle.marginTop, 10) || 0) - (parseInt(this.currentStyle.marginBottom, 10) || 0)));  
<![endif]-->

 
Добавлено:

Цитата:
я бы игнорировал IE6 вообще, так как даже XP без SP2/SP3 вряд ли будет установлен.

У меня была версия ХP SP2 c IE6 — без возможности обновления IE6.
Всего записей: 1367 | Зарегистр. 05-04-2010 | Отправлено: 21:41 10-10-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D

Цитата:
Судя по данным движков, хаки не срабатывают  

1) это не хаки (хаки это небольшие разницы в css, которые обрабатываются только конкретными браузерами
2) условия вида
Цитата:
<!--[gt IE 6]>  
не должны быть внутри стиля. по крайней мере я не видел их подобного использования, но и они представляют собой html комментарии, поэтому не могут идти в описании стиля
Всего записей: 15096 | Зарегистр. 20-09-2014 | Отправлено: 21:46 10-10-2017 | Исправлено: Mavrikii, 21:46 10-10-2017
D1D1D1D

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Запустил из тела HTML вот так — тоже не пошло:

Код:
 
<!--[gt IE 6]>
 <link href= "IE6+.css" rel= "stylesheet" media= "all" />  
<![endif]-->
 
<!--[if lt IE 6]>  
 <link href= "IE6-.css" rel= "stylesheet" media= "all" />  
<![endif]-->
 
Всего записей: 1367 | Зарегистр. 05-04-2010 | Отправлено: 21:59 10-10-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D
а chm упаковывает и сторонние css файлы?

Цитата:
<!--[gt IE 6]>


Цитата:
<!--[if lt IE 6]>

а для 6 версии? первое условие >6 (к тому же скушано if), второе <6
Всего записей: 15096 | Зарегистр. 20-09-2014 | Отправлено: 22:05 10-10-2017 | Исправлено: Mavrikii, 22:05 10-10-2017
D1D1D1D

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
С исправленным IF, условие для версии IE выше шестой — работает в 7, 8 и 9 версиях движка, в chm не смотрел. А почему второй вариант условия не подхватывается?
 
 
 
Добавлено:
Нашел вот такой код, фурычит вроде во всех движках:

Код:
 
#footer {
 position: fixed;
 left: 0px;
 bottom: 0px;
 height: 30px;
 width: 100%;
 background: #444;
}
 
/* IE 6 */
* html #footer {
 position: absolute;
 top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
Всего записей: 1367 | Зарегистр. 05-04-2010 | Отправлено: 22:25 10-10-2017 | Исправлено: D1D1D1D, 22:25 10-10-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D

Цитата:
А почему второй вариант условия не подхватывается?  

для него нужен версии ниже 6 (не включая 6) - он есть?
Всего записей: 15096 | Зарегистр. 20-09-2014 | Отправлено: 22:37 10-10-2017
D1D1D1D

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
для него нужен версии ниже 6 (не включая 6) - он есть?  

Когда выбирал движок с цифрой 5 — не работало. Но последний код (#footer) работает на любом пункте.
Всего записей: 1367 | Зарегистр. 05-04-2010 | Отправлено: 22:43 10-10-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D

Цитата:
Но последний код (#footer) работает на любом пункте.

не будет в IE>=8
https://msdn.microsoft.com/en-us/library/ms537634(v=vs.85).aspx

Цитата:
Dynamic properties (also called "CSS expressions") are no longer supported in Internet Explorer 8 and later, in IE8 Standards mode and higher. This decision was made for standards compliance, browser performance, and security reasons. Dynamic properties are still available in Internet Explorer 8 in either IE7 mode or IE5 mode.

я имел в виду, что часть с expression не работает в ie8 и выше, там срабатывает правило выше, с position: fixed.
хаком под версию, в данном случае, является звездочка
Всего записей: 15096 | Зарегистр. 20-09-2014 | Отправлено: 22:45 10-10-2017 | Исправлено: Mavrikii, 22:46 10-10-2017
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2

Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Фиксация элемента внизу страницы (CSS)


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru