Фиксирование блока ( position: fixed или иное)

Altenrion · August 26, 2012

Уважаемые товарищи!

Сравнительно недавно сел за верстку проекта и столкнулся с новой для себя проблемой. Надеюсь на действенные советы и помощь.

Суть задачи: Верстка страницы сайта в 3 колонки div-ами, располагающимися внутри основного. Также в основном блоке имеется горизонтальный <div>, который требуется зафиксироватиь внизу экрана, чтобы при скролле страницы ( в случае появления скролла) он оставался всегда на своем месте.

В верстке основных блоков проблем не возникло, а вот при реализации фиксированного блока появились трудности.

Для реализации этой задачи я использовал

position: fixed;  bottom: 0px;

Блок зафиксировался на нужном месте, но в Google Chrome прокрутка страницы очень сильно подвисает ( подергивается), в Mozilla FF все читается отлично.

Ниже привожу код:


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" type="text/css" href="menu.css" />
    <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
</head>
<body>

 <div id="total">
                <div id="top">
                    <div id="top_left">
                        fdsgs dfgsdfg sdfg sf df gsfgsdf gfsdg dfs gsdfg sdf gsdfg s sdfg sdf gsdf g
                    </div>
                    <div id ="top_right">
                        fdsgs dfgsdfg sdfg sf df gsfgsdf gfsdg dfs gsdfg sdf gsdfg s sdfg sdf gsdf g
                    </div>
                </div>
                <div id="center">
                    <div id="left">


                        <ul id="menu">
                            <li><a href="/" target="_self">Главная</a></li>
                            <li><a href="#" target="_self">Ссылка</a></li>
                            <li><a href="#" target="_self">Ссылка</a></li>
                            <li><a href="#" target="_self">Ссылка</a></li>
                            <li><a href="#" target="_self">Ссылка</a></li>
                            <li><a href="#" target="_self">Ссылка</a></li>
                            <li><a href="#" target="_self">Ссылка</a></li>
                            <li><a href="#" target="_self">Ссылка</a></li>
                        </ul>
                    </div>
                    <div id="center1">
                        fdsgs dfgsdfg sdfg sf df gsfgsdf gfsdg dfs gsdfg sdf gsdfg s sdfg sdf gsdf g
                    </div>
                </div>
                <div id="right">

                    <ul id="menu2">
                        <li><a href="/" target="_self">Главная</a></li>
                        <li><a href="#" target="_self">Ссылка</a></li>
                        <li><a href="#" target="_self">Ссылка</a></li>
                        <li><a href="#" target="_self">Ссылка</a></li>
                        <li><a href="#" target="_self">Ссылка</a></li>
                        <li><a href="#" target="_self">Ссылка</a></li>
                        <li><a href="#" target="_self">Ссылка</a></li>
                        <li><a href="#" target="_self">Ссылка</a></li>
                    </ul>
                </div>

                <div id="fixed-div">
                    fdsgs dfgsdfg sdfg sf df gsfgsdf gfsdg dfs gsdfg sdf gsdfg s sdfg sdf gsdf g
                </div>
 </div>
</body>
</html>

И css код соответственно:


* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
header, nav, section, article, aside, footer {
    display: block;
}
body {
    font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
    width: 100%;
    height: 100%;
    background: url('/n.gif') no-repeat;
    background-attachment: fixed;
}
a {
    color: blue;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
p {
    margin: 0 0 18px
}
img {
    border: none;
}

#total {
    width: 960px;
    height: 100%;
    position: relative;
    border: 1px solid black;
    margin: 0 auto ;
  /*  background-color: #ffd700 ;      */
    background-image: url(img/bg_total.png);
    background-size: 100% auto;
    background-repeat: no-repeat;

   /* z-index: 2;   */
}
#menu{

    z-index: 4;
}
#top{
    Width: 960px;
    height: 100px;
    margin: 0 auto;
    border: 1px solid #3eff51;


}
#top_left{
    Width: 150px;
    height: 100px;
    float: left;
    border: 1px solid #3eff51;
}

#top_right{
    Width: 800px;
    height: 100px;
    float:right;
    border: 1px solid #b7ff3a;
}

#center {
    border: 1px solid black;
    width: 750px;
    height: 100%;
    float: left;
    margin: 0 auto;

}

#right {
    border: 1px solid black;
    width: 180px;
    height: 100%;
    float: right;
}

#left {

    border: 1px solid black;
    width: 150px;
    height: 100%;
    float: left;
   /* padding-left: 40px; */
}

#center1 {
    border: 1px solid black;
    width: 590px;
    height: 100%;
    float: right;
    padding-left: 0px;
}

#fixed-div {
    width: 960px;
    height: 259px;
    border: 1px solid red;
    position: fixed;
    bottom: 0px;
    background-image: url(img/bg_bottom.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    z-index: -1;
}

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

В течении 2 суток нашел очень много информации по возможным вариантам фиксирования блоков и с css и js, jquery , но в них не силен поэтому прошу совета, или ссылку на ресурс где я смог бы разобраться.

Yazon_Nile · August 27, 2012

Как насчет задать для фикседдива ещё и лефт:0

???

Остальное не смотрел.. Слишком много)

Залейте на хостинг - дела пойдут быстрее.

Altenrion · August 27, 2012

left:0px;

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

Edited August 27, 2012 by Altenrion

Yazon_Nile · August 27, 2012

Залейте на хостинг - дела пойдут быстрее.

Sign In

Фиксирование блока ( position: fixed или иное)

Question

Altenrion

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Yazon_Nile

Link to comment

Share on other sites

Altenrion

Link to comment

Share on other sites

Yazon_Nile

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information