Очистить нижний колонтитул для предотвращения перекрытия содержимого

Я нашел способ размещения нижнего колонтитула, который мне нравится, за исключением того факта, что нижний колонтитул перекрывает содержимое при изменении страницы.Очистить нижний колонтитул для предотвращения перекрытия содержимого

Использование структуры и форматирования У меня уже есть, как я могу «очистить» нижний колонтитул, чтобы он снижался при изменении размера страницы (избегая перекрытия #content)?

Я пробовал clear: left, и это ничего не делает для этого.

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

CSS:

* { 
    margin: 0; 
    padding: 0; 
} 
html { 
    height: 100%; 
} 
body { 
    background-size: cover; 
    margin: 0; 
    height: 100%; 
} 
#wrapper { 
    min-height: 100%; 
    height: 100%; 
    min-width: 900px; 
    overflow: hidden; 
} 
.main_nav { 
    margin: 0; 
    width: 160px; 
    float: left; 
    padding-left: 40px; 
    overflow: hidden; 
} 
#content { 
    float: left; 
    width: 750px; 
    height: 600px; 
} 
#footer { 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    height: 50px; 
}

HTML:

<body> 
<div id="wrapper"> 
    <div id="header"> 
    <h1></h1> 
    <ul class="main_nav"> 
     <li></li> 
    </ul> 
    </div> 
    <div id="content"> 
    </div> 
</div> 
<div id="footer"> 
    <div id="footer_content"></div> 
</div> 
</body>

источник

2013-05-06 pianoman

Пожалуйста, исправьте меня. Вы хотите, чтобы нижний колонтитул был скрыт от просмотра при изменении размера окна браузера? – Ankur

Нет, я хочу, чтобы нижний колонтитул всегда был видимым, когда позволяет пространство; однако, когда окно изменяется (меньше), и для нижнего колонтитула недостаточно места, я не хочу, чтобы он перекрывал содержимое. – pianoman

Ответ уже выбран, но я хотел дать альтернативу.

«Обертка» содержит «заголовок» и «контент», а «нижний колонтитул» находится за его пределами. Можно, например, добавить

z-index:10;

в КАС, обертки и

z-index:1;

в CSS нижнего колонтитула в.

Этот последний не нужен, но для полноты. Таким образом, всякий раз, когда они попадают в «прикосновение», один с более высоким z-индексом останется на переднем плане (т. Е. Более высокий уровень по оси z, то есть ось, перпендикулярная поверхности экрана), а остальные элементы будут скользить позади , согласно их собственному индексу.

источник

2013-05-06 07:01:20

Эта проблема из-за ширины. Ваша ширина отличается в каждом случае, то есть в содержании, нижнем колонтитуле &. Я создал jsfiddle

[http://jsfiddle.net/jvaibhav/xncuF/37/]

попробуйте это.

источник

2013-05-06 06:02:15

Это не работает из-за плавающего меню. – pianoman

Очистить нижний колонтитул для предотвращения перекрытия содержимого

ответ

Смежные вопросы