CSS липкий колонтитул с дополнительным элементом - PullRequest
Новая
       41

CSS липкий колонтитул с дополнительным элементом

1 голос
/ 13 декабря 2011

Я пытаюсь создать собственный веб-сайт для своего портфолио, и наткнулся на http://ryanfait.com/sticky-footer/.. У меня проблемы с добавлением дополнительного элемента для него.

У меня есть следующая структура HTML: 

<html>
<head>
    <link rel="stylesheet" href="style.css" ... />
    <link rel="stylesheet" href="layout.css" ... />
</head>
<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright (c) 2008</p>
    <img src="image.png>    
    </div>
</body>

И следующий style.css: 

.wrapper {
position: relative;
width: 800px;
margin: 0 auto -50px;
}

.footer {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0;
background-color:#000000;
text-align:center;
}

.footer img {
position: relative;
width: 400px;
top: -238px;
margin: 0 auto;
} 

.footer a {
color: #fff;
text-decoration: underline;
border: 0;
}

.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 100%;
padding: 0;
color: #fff;
font: 0.8em arial,sans-serif;
}

с layout.css: 

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's        height */}
.footer { height: 50px; /* .push must be the same height as .footer */} 

.push {
height: -100px; /* .push must be the same height as .footer */
}

Я установил отрицательное изображение, чтобы оно перекрывало основное содержимое при изменении размера окна. Также мне хотелось бы приклеить нижнюю «рамку» прямо под изображением. Тем не менее, независимо от того, как много я путаю с полями или высотой, я не могу избавиться от негативного пространства, которое создает приведенный выше код. У вас есть предложения?

** Я понял это. Учебник с липким нижним колонтитулом создает липкий нижний колонтитул, который останавливается на границе основного тела То, что я хотел, было липким нижним колонтитулом, который был верхним «слоем», который будет проходить поверх основного тела и иметь элемент границы внизу. Я не должен был использовать «top: -238px». Вместо этого я вложил класс в нижний колонтитул в HTML и CSS. 

<div class="footer">        
    <img src="Image.png" width="400" height="238" />
    <div class="bottom-border">
        <p>Copyright (c) 2008</p>
    </div>
</div>

и 

.footer img {
position: relative;
width: 400px;
margin: 0 auto;} 

.bottom {
position: relative;
width: 100%;
height: 20px;
margin: 0 auto 0;
padding: 0;
text-align:center;
background-color: #000000;}

Затем, следуя инструкциям sticky-footer в комментариях layout.css, я сохранил .wrapper, .footer, .push height одинаковыми. **

Ответы [ 2 ]

0 голосов
/ 02 марта 2015

У меня самое простое решение для липкого нижнего колонтитула.Пожалуйста, просто добавьте высоту: 100% по телу и HTML.Затем обертка дисплея: таблица.Для добавления элемента вы можете добавить любой контент / элемент внутри элемента .w1.

И его нижний колонтитул тоже гибок.

Вот код 

html{height:100%;}
body{
    margin:0;
    height:100%;
  background: #ccc;
}
#wrapper{
    width:100%;
    height:100%;
    display:table;
    margin:0 auto;
}
#footer{
    width:100%;
    overflow:hidden; /*for FF on Windows 7*/
    display:table-footer-group;
    height:1%;
  background: #333;
  color: #fff;
}
<div id="wrapper"> <!-- table -->
    <div class="w1">
        <p>header and content of the page</p>
    </div>
    <div id="footer"> <!-- table-footer-group -->
            <p>footer content</p>
    </div>
</div>
0 голосов
/ 21 августа 2012

Немного поздно, но я все равно могу ответить на него :) Проблема возникает из-за того, что ваше изображение находится относительно нижнего колонтитула, но оно все еще занимает то же место на странице.Вы хотите использовать position:absolute;.

Здесь это работает

Я внес следующие изменения: 

.footer img { 
  position:absolute; 
}

.footer p {
  position: relative;
  height:4em;
}

Использование position:absolute; будетпоместите элемент в положение последнего нестатического (по умолчанию) элемента и удалите его из «потока страницы».Так что в этом случае он помещает его в .footer и удаляет его со страницы, чтобы он больше не занимал место.

РЕДАКТИРОВАТЬ: Также я нарушил центрирование, изменив его на абсолютное значение margin:0 auto; не будет работать на position:absolute; элементах.Добавьте эти правила, чтобы исправить это. 

.footer img {
  left:50%;
  margin-left:-200px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...