Search the Community

Есть страница, c: body { max-width: 1200px; margin: auto; } т.е. контент посередине. Вопрос: есть блок <footer>, как средствами CSS сделать его "привязанным" к низу страницы так, чтобы он был одного размера с body? И соответственно менял размеры, если у body меняется. Ну например: окно браузера уменьшили... footer { position: fixed; bottom: 0; } "привязывает" <footer> к низу, но растягивает по ширине экрана.

Есть такая разметка, возможно она кривая, но в силу некоторой идеи она такая. http://jsfiddle.net/8rqetnyo/ Вложенный слой со скролом, выполняющий роль основного на странице + фиксированный слой, который перекрывает скролл. Как бы вы решили? Быть может оно вообще не решается... ? Была мысль с width: calc но в разных браузерах оно у меня выглядит по разному

Необходимо, чтобы реагировал на клик сначала внутренний блок (CONTENT), а далее уже родительский (FIXED) Как это можно реализовать? Ссылка https://jsfiddle.net/ux7gknhk/1/

Все привет! Подскажите знающие люди столкнулся с таким багом при верстке адаптивной версии сайта, Значит есть мобильное меню при нажатии на определенный блок выплывает блок с свойством position:fixed; и в этом блоке уже навигация по сайту. На десктопе все ок работает, баг идет именно на мобильном, когда открываешь сайт с телефона и открываешь моб меню, так как стоит свойство position:fixed, то есть скролл и если начинаешь скроллить, обычно сначала вниз, после чего на моб браузере соотвественно появляется адресная строка браузера, но при обратном скролле т.е вверх, адресная строка как положено пропадает и остается место от нее на несколько долей секунд, кто сталкивался с такой проблемой подскажите как решить?

Искал решение и встретил какой-то сайт с такой же проблемой. http://immersprint.tk/(не реклама). ВОПРОС: А возможно сделать так, чтобы верхнее меню, которое position: fixed, при сужени браузера не резало правый его край? Может есть какой плагин?

Всем привет! Столкнулся с такой проблемой: У меня есть блок у которого задан position:fixed; left:0; top:0. и он у меня прилип к углу экрана браузера. но вот если родителю этого блока задать трансформ, например, transform: translateX(0), даже нулевой, то фиксед начинает считать не от экрана браузера, а от блока с трансформом. Никогда с таким не сталкивался, кто-то может объяснить почему он себя так ведет и как этом можно пофиксить. Набросал мини примерчик http://codepen.io/Z1gnet/pen/VYOxGG

Добрый вечер, у меня возникла проблема при верстке сайта. Сделал fixed top меню, но оно не корректно отображается относительно основной части сайта, в частности сайт имеет минимальную ширину 760px, и если окно браузера уменьшать по ширине до появления полос прокрутки, то сам сайт становится по ширине 760px, но вот верхнее меню продолжает уменьшаться из-за того, что у него position: fixed по понятным причинам. Если же самому меню тоже поставить минимальную ширину 760px, то в отличие от всего сайта полосами прокрутки его прокрутить не получится, он просто частично выпадет за край окна. Можно ли как-то решить это проблему? Желательно без вмешательства скриптов? Спасибо) http://jsfiddle.net/m29nn87s/

На странице есть шапка с позицией fixed: .top_menu_p { position: fixed; left: 0; top: 0; padding: 0px; background: #ffffff; width: 100%;}Так же есть слайдер контента (jcarousel) с позицией relative: .jcarousel ul { position: relative; width: 20000em; list-style: none; margin: 0; padding: 0;}При пролистывании станицы, когда шапка подходит к слайдеру, он отображается поверх шапки. Как это исправить? У слайдера позицию relative не заменить, иначе не будет работать. КТо-нибудь сталкивался с такой проблемой?

Добрый день! Хочу у себя на сайте сделать что-то подобное как на http://vz.ru . Когда прокручиваешь страницу, боковые блоки упираются в свое окончание контента и тоже прокручиваются до футера. Но из-за нехватки знаний jquery не могу разобратся. Нашел из файл, где это все хранится в http://vz.ru/vengine.js и понял, что все прокручиваемые колонки имеют класс fixed_wrap, а не прокручиваемая fixed_wrap2. Я вырезал кусок из файла js и подключал его в head и ничего не происходит, вот код initFixColumn: function() { if (jQuery.browser.mobile) return; var initColumns = function() { jQuery(".fixed_wrap2").each(function() { var div = jQuery(this); if (div.height() > VZ.maxHeight) { VZ.maxHeight = div.height(); } }); }; initColumns(); jQuery(window).resize(initColumns); jQuery(window).scroll(function() { var height = jQuery(window).height(); var top = jQuery(document).scrollTop(); var b = jQuery("#copyrights").offset().top - 40; jQuery(".fixed_wrap").each(function() { var div = jQuery(this); var h = Math.floor(div.offset().top + div.height()); var diff = (VZ.maxHeight > 0) ? Math.min(VZ.maxHeight - div.height(), 0) : 0; //console.warn("top " + top + " h " + height + " h " + h + " tt " + div.offset().top + " dh " + div.height() + " pos " + div.css("position")); if (div.offset().top < diff) { div.css("bottom", "auto"); div.css("width", "auto"); div.css("position", "static"); var next = div.next(); if (next && next.hasClass("sys_fix")) { next.remove(); } } else if (top + height >= h && div.height() > height) { if (div.css("position") != "fixed") { div.css("width", div.width() + "px"); } if (h >= b && div.parent().attr("id") != "right") { div.css("bottom", (top + height - + "px"); } else { div.css("bottom", "0px"); } div.css("position", "fixed"); var next = div.next(); if (!next || !next[0] || !next.hasClass("sys_fix")) { next = jQuery("<div/>"); next.addClass("sys_fix"); div.parent().append(next); } next.css("width", div.width() + "px"); } }); }); } Может проблема в том, что у них сайт сделан в таблицах, а div перемещается по высоте ячейки, если да, то как это обойти?

как сделать чтобы логотип не прокручивался только жанры фильмов прокручивались http://codepen.io/lybrook/pen/rvDlw/

Добрый день! Есть такая проблема: если поставить фиксированно позиционированный элемент (без значений позиции, авто) внутрь элемента, который лежит внутри относительно позиционированного элемента, то такой элемент в Chrome отображается на неверной позиции. Во всех других браузерах этот элемент отображается на нужной позиции: той, в которой бы он появился, если бы был статическим) Вот пример простой: http://cssdesk.com/Gvpvg Вот пример практический: http://cssdesk.com/mnMxs Если кто сталкивался или знает, как это решить без применения js-костылей, то помогите пожалуйста. Судя по гуглу, с такой проблемой ещё никто не сталкивался.

Здравствуйте! Есть страница сайта: http://gorenje.desig...u/produkty.html На ней есть внизу две (красные) плашки. В общем надо, чтоб при прокрутке в окне браузера они по оси Y оставались на одном месте (как сейчас и есть), а по оси X сдвигались вместе с серой рамкой (если меняем ширину окна). Тоесть чтоб они были прикреплены к серой рамке статьи (по оси X) и при резайзе окна браузера никуда не убегали (по оси X). Возможно ли это сделать с помощью CSS ?

Здравствуйте! Подскажите, пожалуйста, как при скролинге страничке, сделать, что бы div2 вставал на место div1 (т.е. уходил верх)? При скролинге в топ - блоки возвращались на свою позицию. Спасибо! Код на http://cssdeck.com/labs/i1jxnjzh <html> <title>hello word</title> <style> body{ margin:0px; padding:0px; } .div1 { width: 100%; text-align: center; background-color: #e1e1e1; height: 40px; line-height: 40px; } .div2 { width: 100%; text-align: center; background-color: #888888; position: fixed; height: 30px; line-height: 30px; } .div3 { margin-top: 30px; } </style> <head> </head> <body> <div class="div1"> hello, hide me </div> <div class="div2"> scroll me </div> <div class="div3"> scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br> </div> </body> </html>

Добрый день, необходимо сделать меню, которое плавает вдоль левого края контейнера, все бы ничего, но сайт адаптивный и когда окно браузера становится меньше основной ширины контейнера - с этим справляются @media, а как сделать чтобы позиция отсчитывалась от центра страницы или от контейнера, чтобы при больших и разных экранах меню оставалось на своем месте, возле контейнера? Буду благодарен за любую информацию. Нашел решение при помощи calc(); но, судя по заявленным данным о поддержке браузерами - не так много поддерживают эту функцию, может есть более правильное решение?

В опере иногда сьезжает #wrapper{ margin:50px auto 0px auto; width:960px; height:auto; } aside{ width:309px; padding:10px; float:left; height:auto; border-collapse: collapse; } article{ width:609px; padding:10px; float:left; height:auto; border-left:1px solid #B9E3F3; border-collapse: collapse; } .clear{clear:both;} footer{ border-top:1px solid #B9E3F3; width:940px; padding:10px; height:auto; } nav{ position:fixed; top:0; left:0; padding:0px; margin:0px; width:100%; height:50px; background:black; } <!DOCTYPE HTML> <head> <meta http-equiv="content-type" content="text/html" /> <title>Sign in Mysite</title> </head> <body> <nav> </nav> <div id="wrapper"> <aside> Блок </aside> <article> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non nisl non justo feugiat viverra. Donec eu quam sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus, velit vel auctor porta, nunc metus venenatis velit, vel vestibulum libero sapien in mi. Aliquam erat volutpat. Sed nibh lacus, bibendum vitae aliquam sit amet, lacinia non justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel enim nec velit pellentesque porttitor. Mauris quis tincidunt dui. Cras lacinia dapibus dolor ac aliquet. Aliquam malesuada orci vel lacus malesuada in consectetur dui malesuada. Integer suscipit libero a erat fringilla fermentum. Sed ligula leo, sollicitudin tristique molestie ut, fermentum et nunc. Praesent tristique mauris eget sem ullamcorper a posuere urna eleifend. Maecenas tincidunt bibendum leo et aliquet. Sed et leo odio. Proin eget justo libero, eu viverra mi. Ut dapibus, lorem sed molestie placerat, nibh est pretium ligula, ornare vestibulum felis lectus ut metus. Mauris tellus risus, laoreet placerat consequat et, porta in mi. Aliquam rhoncus, eros sit amet tincidunt venenatis, elit ipsum feugiat leo, eu ornare ante arcu quis orci. Duis turpis nibh, egestas a elementum sit amet, elementum ac tortor. Mauris et elit mauris. Fusce pretium congue nunc vitae interdum. Vivamus ut sem at nibh feugiat vehicula. Nullam et facilisis eros. Sed aliquam, dui sit amet porttitor tempus, tellus augue pharetra orci, sed tincidunt erat erat nec ante. Pellentesque venenatis lacinia varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eget elit diam. Sed sed felis quam. Sed condimentum commodo dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean mattis metus porta orci consequat aliquet. Maecenas vulputate dictum tempor. Sed rhoncus velit non odio vestibulum lacinia. Integer felis diam, venenatis et feugiat sed, pellentesque at diam. Suspendisse et varius velit. Proin ligula augue, ultrices vitae auctor eget, fringilla non nulla. Sed eu velit nec ligula cursus pellentesque ut eu ante. Nullam ullamcorper urna sed nunc auctor aliquam. Sed suscipit mi quis enim ornare sed congue odio mattis. Integer volutpat justo faucibus eros scelerisque rhoncus. Donec elementum, urna ut sodales sodales, dui sapien tempus erat, et dignissim tortor arcu vel augue. Aenean pretium volutpat tellus ultricies vestibulum. Etiam pretium tellus id arcu dictum convallis. Nulla a orci turpis, tristique fermentum sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non nisl non justo feugiat viverra. Donec eu quam sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus, velit vel auctor porta, nunc metus venenatis velit, vel vestibulum libero sapien in mi. Aliquam erat volutpat. Sed nibh lacus, bibendum vitae aliquam sit amet, lacinia non justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel enim nec velit pellentesque porttitor. Mauris quis tincidunt dui. Cras lacinia dapibus dolor ac aliquet. Aliquam malesuada orci vel lacus malesuada in consectetur dui malesuada. Integer suscipit libero a erat fringilla fermentum. Sed ligula leo, sollicitudin tristique molestie ut, fermentum et nunc. Praesent tristique mauris eget sem ullamcorper a posuere urna eleifend. Maecenas tincidunt bibendum leo et aliquet. Sed et leo odio. Proin eget justo libero, eu viverra mi. Ut dapibus, lorem sed molestie placerat, nibh est pretium ligula, ornare vestibulum felis lectus ut metus. Mauris tellus risus, laoreet placerat consequat et, porta in mi. Aliquam rhoncus, eros sit amet tincidunt venenatis, elit ipsum feugiat leo, eu ornare ante arcu quis orci. Duis turpis nibh, egestas a elementum sit amet, elementum ac tortor. Mauris et elit mauris. Fusce pretium congue nunc vitae interdum. Vivamus ut sem at nibh feugiat vehicula. Nullam et facilisis eros. Sed aliquam, dui sit amet porttitor tempus, tellus augue pharetra orci, sed tincidunt erat erat nec ante. Pellentesque venenatis lacinia varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eget elit diam. Sed sed felis quam. Sed condimentum commodo dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean mattis metus porta orci consequat aliquet. Maecenas vulputate dictum tempor. Sed rhoncus velit non odio vestibulum lacinia. Integer felis diam, venenatis et feugiat sed, pellentesque at diam. Suspendisse et varius velit. Proin ligula augue, ultrices vitae auctor eget, fringilla non nulla. Sed eu velit nec ligula cursus pellentesque ut eu ante. Nullam ullamcorper urna sed nunc auctor aliquam. Sed suscipit mi quis enim ornare sed congue odio mattis. Integer volutpat justo faucibus eros scelerisque rhoncus. Donec elementum, urna ut sodales sodales, dui sapien tempus erat, et dignissim tortor arcu vel augue. Aenean pretium volutpat tellus ultricies vestibulum. Etiam pretium tellus id arcu dictum convallis. Nulla a orci turpis, tristique fermentum sapien. </article> <div class="clear"></div> <footer> Футер </footer> </div> </body> </html>