2012-07-03 6 views
2

На моем сайте: http://alsite.com.br/solalev/ У меня есть некоторые элементы в нижней части страницы, которые я не могу щелкнуть. Над элементами находится div, называемый push .. Я использую этот div, чтобы нижний колонтитул всегда оставался на нижней части моей страницы, даже когда содержимое меньше ... (Я не знаю, правильно ли я это сделаю .. но он сработал) ..не могу щелкнуть по элементу ввода за элементом div

Так .. на Chrome и Firefox не могу нажать .. но на IE это работает ....

Я использую это:

.push{ 
    pointer-events: none; 
} 

, но ничего не происходит .. .

ответ

3

Есть ли причина, по которой вы используете pointer-events: none; в своем CSS? Если нет, тогда просто избавитесь от него, так как это вызывает проблемы.

Посмотрев немного ближе, ваша проблема - это .wrapper div. У вас есть высота 231px на вашем .push div и край-край -231px на вашем .wrapper, чтобы создать липкий нижний колонтитул. Я бы нашел лучший способ создания липких нижних колонтитулов, поскольку этот далеко не идеален. Возможно, один предложил в этих ответах может помочь или использовать этот подход опробован и проверен

CSS Tricks Sticky Footer

или

JQuery Sticky Footer

Я надеюсь, что это поможет вам.

+0

Я ставлю это на тест .. только ... – Preston

+0

Я обновил свой ответ. – frontendzzzguy

+0

'CSS Tricks Sticky Footer' потрясающий! .. очень приятно .. спасибо за помощь !! – Preston

0

Удалить все pointer-events: none; из ваших свойств css (html, body, wrapper, baixo, push, footer). Кажется, вы хотели отключить все события мыши и теперь задаетесь вопросом, почему ничего не происходит при нажатии мыши?

+0

Я помещаю это для теста .. только ... – Preston

0

кажется, что .С плохой способ, чтобы сделать ваше пребывание колонтитула в нижней части ... Вот еще один способ сделать это:

HTML

<html> 
    <head> 
      <title></title> 
    </head> 
    <body> 
      <div id="paddingFix"> 
       <div id="content"> 
        <!-- Your content goes here. --> 
       </div> 

       <div id="footer">Footer</div> 
      </div> 
    </body> 
</html> 

CSS

body,html { 
    height:100%; 
    padding:0px; 
    margin:0px; 
} 
#paddingFix { 
    min-height:100%; 
    position:relative; 
} 
#content { 
    padding-bottom:60px; 
    text-align:center; 
} 

#footer { 
    height:40px; 
    position:absolute; 
    left:0px; 
    bottom:0px; 
    color:#FFF; 
    background:black; 
    width:100%; 
} 

Demo

В основном он позиционирует нижний колонтитул на абсолютном дне контейнера, который является минимальной высотой: 100%; и относительное положение; все содержимое находится в контейнере, а также набивка-дно размером с высоту нижнего колонтитула плюс небольшое пространство.

+0

Возможно, вы захотите установить цвет переднего плана в нижнем колонтитуле; поскольку «как» исчезает, так как черное на черном. – GreenMatt

+0

@ GreenMatt спасибо: p fixed – BjarkeCK

+0

приятно .. я постараюсь завтра ....! благодаря!!! – Preston

0

Во-первых, снимите отрицательную маржу на вас обертку:

#wrapper { 
    margin:0 auto; 
} 

Тогда избавиться от div.push все вместе (удалить его из HTML кода). И, наконец, удалите «указатели-события».

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

Кроме того, больше из любопытства, но похоже, что большая часть кода выполняется с DIVs (правильным) до нижнего колонтитула.Затем, бум, это настольный город (не говоря уже о таблице стилей и метатеге, случайно застрявшей там)! Подходит ли нижний колонтитул от третьего лица?