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

Я пытался заставить эту мою проклятую раскладку работать так долго, и это очень расстраивает. Я новичок в CSS, поэтому, пожалуйста, будьте полегче, но я просмотрел так много статей о липких нижних колонтитулах и растяжке контента, и т.д. Мин-высота ничего не делает для меня!

Вот как я хочу, чтобы мой сайт выглядел, когда на нем недостаточно контента для заполнения страницы.

И это то, что я хочу, чтобы это выглядело, когда контент заставляет вас прокручивать.

Вот HTML-код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to SilmanServer!</title>
<link href="./main.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="pageHeader"> 
<h1>SilmanServer</h1>
<p>Aaron Silman's Personal Home Server </p>
</div>

<div id="navigation">
    <ul>
        <li><a href="./index.html">Home</a></li>
        <li><a href="./blog.html">Blog</a></li>
        <li><a href="./projects.html">Projects</a></li>
        <li><a href="./about.html">About Me</a></li>
        <li><a href="./contact.html">Contact</a></li>
    </ul>
</div>


<div id="main">

<div>
<h2>What the hell?</h2>
    <p>
    This the project I embarked on around June of 2012 with an old computer that I had at home. My goal: To transform that old, useless HP Pavilion a6750y into a fully functioning webserver for this website! Along the way I also learned (X)HTML, CSS, Javascript, PHP, MySQL and a bunch of other things needed for designing and developing websites, as well as administrating my own server.
    </p>
</div>

<div>
<h2> Why? </h2>
    <p> As mentioned before, I really wanted to learn how to build websites that function both on the client side and server side. I wanted to just play around and learn. So I started learning, beginning with the basics. I will also use this website as documentation, tracking my progress and noting a lot of important steps so if anyone (including myself - in case I forget) wants a guide to setting up a server and learning web design and development they an refer to <a href="./guide_to_the_web.html">this page </a> for a complete, idiot-proof, guide to the web from scratch.
    </p>
</div>

</div>

<div id="pageFooter">
    <p> This is a footer
    </p>
</div>

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

и вот CSS:

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* Global Styles */

html{
    background: url(./images/sway.jpg);
    background-attachment: fixed;
    background-repeat::no-repeat;
}

body {
    width: 80%;
    margin: 0 auto; 
}
/* pageHeader Styles */

#pageHeader{
    height: 100px;
    background:#999;
}

#pageHeader h1 {
    padding-left: 30px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 3.5em;
    color:#F93;
}

#pageHeader p{
    padding-left: 40px;
    font-family: "Times New Roman", Times, serif;
    font-size: 2em;
    color: white;
}

/* navigation Styles */

#navigation{
    float:left;
    width:100%;
    background: #0CF;
    overflow: hidden;
    position: relative;
}

#navigation ul{

}

#navigation li{
    float: left;
    margin: 0 20px;
    font-size: 1.5em;
}

#navigation li a:link {color:#F60;}    /* unvisited link */
#navigation li a:visited {color:##89ABFC;} /* visited link */
#navigation li a:hover {color:#3FF;}   /* mouse over link */
#navigation li a:active {color:#009;}  /* selected link */

/* main Styles */

#main{
    width: 80%;
    margin: 0 auto;
    border: 2px solid black;
    background: #999;
    color: #FFF;
}

/* pageFooter Styles */

#pageFooter{
    height: 100px;
    background:#999;
}

#pageFooter h1 {
    padding-left: 30px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 3.5em;
    color:#F93;
}

#pageFooter p{
    font-family: "Times New Roman", Times, serif;
    font-size: 2em;
    color: white;
}

Что я могу сделать, чтобы достичь этого эффекта?

Источник

2 ответа

Решение

То, что вы ищете, это "липкий колонтитул".

  • Более старый способ сделать это только для CSS требует, чтобы вы знали точную высоту нижнего колонтитула. Лучшее решение, которое я смог найти благодаря быстрому поиску в Google - это Sticky Footer Райана Фейта. Учебник Райана работает, помещая высоту 100% на элемент-обертку (который содержит ваш контент, кроме нижнего колонтитула). Эта 100% высота - то, что заставляет ваш контент перемещать нижний колонтитул в нижнюю часть окна, а затем нижний колонтитул пробивается обратно в видимую область, используя отрицательное поле (поэтому вам нужно знать высоту нижнего колонтитула… отрицательное поле должно быть такой же высоты, что и элемент нижнего колонтитула). Есть несколько дополнительных частей, чтобы сделать его надежно работающим во всех браузерах (например, <div class="push"></div>), но это в основном то, что происходит.

  • Более новое решение только для CSS требует использования display: table; (не поддерживается IE7), но допускает нижний колонтитул переменной высоты (см. Липкие нижние колонтитулы CSS: гибкий способ). Это, вероятно, метод, который я бы порекомендовал.

Автор второй статьи упоминает, что Javascript может быть использован для добавления поддержки IE7, но останавливается до написания фактического Javascript. Во время этого ответа StatCounter указывает, что IE7 имеет примерно 1,28% проникновения на рынок. Я оставлю это на ваше усмотрение, чтобы определить, важна ли поддержка IE7, но я бы хотел добавить свои 0,02 доллара, если смогу:-p Во-первых, все пользователи IE7 имеют путь обновления до IE8, а пользователи, которые отказываются от обновления, только усложняет жизнь веб-разработчикам (от IE7 до IE8 открывают возможности для многих важных селекторов CSS2, а также исправляют многие неприятные проблемы с плавающей точкой и делают display: table; возможный). В дополнение к усложнению жизни веб-разработчиков, они оставляют себя открытыми для множества взломов браузеров, которые могут поставить под угрозу их компьютер, что делает их легкой целью для хакеров, желающих расширить свою армию зомби (что делает безопасность более сложной для всех остальных), Во-вторых, должны ли веб-сайты выглядеть одинаково в каждом браузере? (и, конечно, ответ "Нет"). Если нижний колонтитул в нижней части окна браузера можно считать прогрессивным улучшением, вам не нужно беспокоиться.

При этом я обновил код, чтобы он работал в IE7:-p Пожалуйста, посмотрите на jsfiddle и дайте мне знать, как он работает.

Источник

Использовать позицию Css: исправлено

Вы можете обратиться к этой ссылке для получения дополнительной информации об этом. http://www.w3schools.com/cssref/pr_class_position.asp

Источник
Другие вопросы по тегам