Как создать нижний колонтитул в HTML-документе

0

Прежде чем я объясню проблему, просто позвольте мне сказать, что я довольно много искал в google и читал несколько ответов в дополнение к попыткам извлечения, это не совсем работает.

Еще один вопрос html на ноге, но я, похоже, не нахожу ответа на свой вопрос, хотя, похоже, есть много вопросов об этом, его либо действительно странные решения без объяснений или решений, которые не работают, если вы добавите, например, другую форму на сайт на той же странице (нижний колонтитул идет ниже границы рамки макета).

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

margin-top: 100px

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

Мой код css:

.box {
background-color: white ;
height: 800px ;
width: 600px ;
margin: 0px auto ;
border: 1px solid black ;
}

.header {
    text-align: center ;
    padding-left: 5px ;
}

.navigation {
text-align: center ;
font-size: 16px ;
font-family: verdana ;
}

.content {
font-size: 18px ;
font-family: verdana ;
padding-left: 10px ;
}

.contactForm {
font-size: 16px ;
font-family: verdana ;
}

.footer {
margin-top: 100px ;
text-align: center ;
font-size: 16px ;
font-family: verdana ;
width: 600px ;
height: 50px ;
background-color: #f6f6f6 ;
}

мой html-код:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="testing.css" type="text/css">
</head>
<body bgcolor="#f6f6f6">
    <div class="box">
        <h3 class="header">My blog</h3>
        <hr/>
    <div class="navigation">
        <a href="#">Home</a>
        <a href="#">Posts</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </div>
    <hr/>
    <div class="content">
        <form class="contactForm" action="#" method="post">
            <table>
                <tr><td>Contact</td></tr>
                <tr><td>Name:</td><td><input type="text" name="name"></td></tr>
                <tr><td>E-mail:</td><td><input type="text" name="email"><td></tr>
                <tr><td>Message:</td><td><input type="textarea" name="message"></td></tr>
                <tr><td><input type="submit" name="submit"></td></tr>
            </table>
        </form>
    </div>
    <div class="footer">
        test
    </div>
</body>
</html>

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

Может кто-нибудь объяснить, как создать правильный нижний колонтитул? Было бы неплохо, если бы было объяснение кода.

Теги:

4 ответа

2

Похоже, у вас есть открытый div, чтобы начать, что не поможет.

Изменить:

<div class="box">
<h3 class="header">My blog</h3>
<hr/>

в

<div class="box">
<h3 class="header">My Blog</h3>
</div>

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

Поделиться
  • 0
    Открытый div - это контейнерный элемент для остальных элементов, хотя, ознакомьтесь с руководством
  • 0
    Похоже, он никогда не будет закрыт. Насколько я вижу, есть 4 тега <div> и только 3 тега </ div>.
2

position:fixed; CSS position:fixed; должен сделать трюк.

.footer{
    position: fixed;
    text-align: center ;
    font-size: 16px ;
    font-family: verdana ;
    width: 600px ;
    height: 50px ;
    background-color: #f6f6f6 ;
}

Скрипт: http://jsfiddle.net/pXBpc/1/

Поделиться
  • 0
    Это работает до тех пор, пока вы не добавите больше текста на страницу, которая содержится в блоке ... если я, в качестве теста, добавлю еще пять форм, нижний колонтитул будет помещен ниже границы строки для блока, как и формы, хотя ... возможно, я здесь чего-то не хватает ... я думал, что высота содержимого рамки и границы должна была увеличиться до более высокого значения высоты, когда содержимое достигло нижнего колонтитула, так что я думаю, что это один из способов сделать это ... но как мне это сделать? поэтому нижний колонтитул и пограничная линия сдвигаются вниз, когда содержимое становится достаточно близко к нижнему колонтитулу, поэтому формы не попадают ниже пограничной линии
  • 0
    Проверьте это: jsfiddle.net/pXBpc/2 Независимо от того, сколько текста вы добавите, нижний колонтитул останется внизу. Если ваша проблема все еще сохраняется, создайте скрипку и скопируйте проблему там. Люди с большей вероятностью помогут вам, если вы создадите скриптовую ссылку, повторяющую проблему.
Показать ещё 1 комментарий
0

Используйте следующий код, чтобы исправить нижний колонтитул в нижней части страницы:

.footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:50px;
   width:100%;//or 600 pixels if you don't want it to fill the bottom of the page
   background:#999;
}
Поделиться
0 
.footer {
position:fixed;
bottom:0;
text-align: center ;
font-size: 16px ;
font-family: verdana ;
width: 600px ;
height: 50px ;
background-color: #f6f6f6 ;
}
Поделиться
  • 0
    Это не работает с высотой поля, поле имеет сплошную черную рамку вокруг него, а нижний колонтитул расположен значительно ниже этой границы. Не похоже, что я могу опубликовать его здесь, но это не работает, как ожидалось

Ещё вопросы

Сообщество Overcoder
Наверх
Меню