Предотвратить перекрытие нижнего колонтитула - PullRequest
Новая
       8

Предотвратить перекрытие нижнего колонтитула

0 голосов
/ 22 марта 2011

Я прочитал множество постов, касающихся этой же проблемы, но я не смог найти подходящее решение для моей проблемы ...

Мое текущее разрешение - 1440x900, и сайт ведет себя хорошо, что означаетчто нижний колонтитул останавливается прямо под моей оберткой меню.

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

Заранее спасибо!

Мой HTMLэто: 

    <body>
            <div id="mainwrap">
                <div id ="menuwrap">
                    <a href="index.html"><div id="menulogo"></div></a>
                </div>

                <div id="mainarea_wrap">
                                 (A LOT OF TEXT-- like 30 lines or so)
                </div>

                <div id="footer">

                </div>
            </div>
        </body>

Мой CSS это: 

body{
padding:0;
margin:0;
background:url(bg.gif);
background-attachment:fixed;
font-family: Verdana, Arial;
font-size: 0.8em;
}

#mainwrap{
margin-top:30px;
width:800px; 
height:600px; 
position:relative; 
margin-left:auto;
margin-right:auto;
}

#mainarea_wrap{
width:600px;
height:auto;
position:relative;
left:201px;
text-align:justify;
padding:20px;
margin-bottom:-1px;
border-top:solid 1px;
border-right:solid 1px;
border-bottom:solid 1px;
border-color:#D8D8D8;
border-left:solid gray 1px;
border-top-right-radius:10px 10px;
border-bottom-right-radius:10px 10px;
background-color:#F0F0F0;
}

#menuwrap{
height:549px;
width:200px;
position:fixed;
padding-top:20px;
padding-left:20px;
background-color:white;
border:solid 1px;
border-color:#D8D8D8;
border-top-left-radius:10px 10px;
border-bottom-left-radius:10px 10px;
}

#menulogo{
width:200px;
height:150px;
position:relative;
background:url(jmedicas.png) no-repeat;
margin-top:-13px;
margin-left:-20px;
}

#footer{
position:relative;
width:100%;
height:25%;
border:solid 1px;
border-bottom:none;
border-color:#D8D8D8;
padding:20px;
padding-top:0px;
background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* ie */
border-top-right-radius:10px 10px;
border-top-left-radius:10px 10px;
}

.shadow {
-moz-box-shadow: -5px 4px 8px #000;
-webkit-box-shadow: -5px 4px 8px #000;
box-shadow: -5px 4px 8px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Ответы [ 3 ]

2 голосов
/ 22 марта 2011

Я заметил несколько вещей, которые нарушали ваш макет.

Одним из них была общая ширина ваших элементов.Вы установили ширину, подходящую для вашего #mainwrap, но также установили отступы для них.Заполнение добавлялось к общей ширине элементов, поэтому ваш #mainarea_wrap вместо 600px был на самом деле шириной 640px (+ 20px заполнения с каждой стороны).Так как ширина обертки в 800 пикселей была превышена вашими двумя элементами, это нарушило компоновку.

Еще одно относительное расположение, которое вы использовали для перемещения ваших элементов.Я думаю, что более эффективный способ позиционирования ваших элементов будет с помощью поплавков.Если вы плаваете #menuwrap влево, а ваши #mainarea_wrap вправо с исправленными значениями ширины, они будут хорошо сидеть в вашем #mainwrap.

Если вы используете эту технику, вы можете использовать clear:both; на вашем #footer, чтобы убедиться, что он всегда будет отображаться под этими двумя элементами.

Вот урезанный jsfiddle, показывающийо чем я говорю: http://jsfiddle.net/9XWAL/

(Не обращайте внимания на яркие цвета! Я просто быстро установил их для наглядности).

Надеюсь, это поможет!Удачи!

1 голос
/ 08 марта 2012

Не знаю, у вас все решено или нет, но вот как я решил похожую проблему.

Мой нижний колонтитул продолжал перекрывать мой контент. Основная структура выглядит следующим образом: 

body
div id=page_container
div id=bodywrap
content
/div
/div
div id=footer
/div

Это выглядело великолепно, развернуто, но когда я сократил окно (или нажал на инструменты разработчика), нижняя часть перекрывалась с размером нижнего колонтитула.

Поэтому я вставил div, называемый footpad, в конце контейнера страницы, после bodywrap 

body
div id=page_container
div id=bodywrap
content
/div
div id=footpad
/div
/div
div id=footer
/div

и изменил CSS следующим образом: 

28 #page_container {
29         position:relative;
30         width:960px;
31         background-color:#ffffff;
32         margin:0 auto;
33         text-align:left;
34         height:auto !important;
35         height:100%;
36         min-height:100%;
37 }

97 #footer {
98         background-color: #DFE1E1;
99         color:#949595;
100         position:relative;
101         margin-top:-151px;
102         padding:15px;
103         width:100%;
104         clear:both;
105 }

151 #footpad {
152         width:100%;
153         height:151px;
154         position:relative;
155 }

А теперь это прекрасно работает.

0 голосов
/ 22 марта 2011

Пространство, которое вы указали под логотипом, меньше высоты нижнего колонтитула, поэтому нижний колонтитул должен перекрывать логотип при прокрутке.Причина, по которой он работает на некоторых разрешениях, заключается в том, что высота на 25% варьируется.Вместо этого вам нужна фиксированная высота нижнего колонтитула, например THIS

...