Как сделать так, чтобы короткие страницы контента доходили до нижней части окна браузера, и тогда должен появиться нижний колонтитул - PullRequest
Новая
       16

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

4 голосов
/ 14 апреля 2010

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

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

Может кто-нибудь помочь мне с этим кодом прямо здесь?

Я пытался использовать некоторые из кодов, которые я нашел на этой странице: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page, который говорит о той же самой проблеме, но я не могу сделать это полностью:
Что я делаю не так? 

@charset "utf-8";
body {
    margin: 0;
    padding: 0;
    text-align: center;
    height:100%;
    position: relative;
    height:100%; /* needed for container min-height */
    }
.spacer {
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
    font-size: 0.1em;
}
.spacer_left {
    clear: left;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.1em;
}
hr {
    height: 1px;
    margin: 20px 0 20px 0;
    border: 0;
    color: #ccc;
    background: #ccc;
}
#container {
    position:relative; /* needed for footer positioning*/
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */

    width: 1160px;  /* width of the site ! */
    margin: 0 auto;
    padding: 0;
    border: 1px solid #333;
    text-align: left;
}
/* Context Bar */ 
h1#contexto {
    background:url('../images/menubarbg2.png');
    width:1160px;
    height:30px;
    position:relative;
    margin-top:10px;
    visibility: inherit;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
#header {
    margin: 0;
    padding: 5px;
    height:70px;
}
h1#titulo {
    margin: 0;
    padding: 0 0 0;

}
#content {

 margin: -15px 20px 0 20px;
 /*padding: -6px 5px 20px 5px;*/
 padding:1em 1em 5em; /* bottom padding for footer */

}
div#content.columns {
    margin-left: 100px;
}
#content abbr, #content acronym {
    cursor: help;
    border-bottom: 1px dotted;
}
#content ul {
    list-style-type: square; 
}
#content ul li, #content ol li {
    margin: 0 0 0.4em 0;
    padding: 0; 
}
#content blockquote {
    width: 75%;
    margin: 0 auto;
    padding: 20px;
}

#footer  
{
 margin: 0;
 height: -30px;
 padding: 5px;
 clear: both;
 bottom:0; 
 position:relative;
}

ОБНОВЛЕНИЕ: РЕШЕНИЕ 

@charset "utf-8";
body, html {
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative;
    height:100%; /* needed for footer positioning*/
}
.spacer {
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
    font-size: 0.1em;
}
.spacer_left {
    clear: left;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.1em;
}
hr {
    height: 1px;
    margin: 20px 0 20px 0;
    border: 0;
    color: #ccc;
    background: #ccc;
}
#container {
    position:relative; /* needed for footer positioning*/
    min-height: 100%;/* needed for footer positioning*/
    height: auto !important;/* needed for footer positioning*/
    height: 100%;/* needed for footer positioning*/
    margin: 0 auto -30px;/* needed for footer positioning*/
    width: 1160px;
    padding: 0;
    border: 1px solid #333;
    text-align: left;
}
#header {
    margin: 0;
    padding: 5px;
    height:70px;
}
h1#titulo {
    margin: 0;
    padding: 0 0 0;
}
h1#contexto {
    background:url('../images/menubarbg2.png');
    width:1160px;
    height:30px;
    position:relative;
    margin-top:10px;
    visibility: inherit;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
#content {
    margin: -15px 20px 30px 20px; /* needed for footer positioning*/
}
div#content.columns {
    margin-left: 100px;
}
#content abbr, #content acronym {
    cursor: help;
    border-bottom: 1px dotted;
}
#content ul {
    list-style-type: square;
}
#content ul li, #content ol li {
    margin: 0 0 0.4em 0;
    padding: 0;
}
#content blockquote {
    width: 75%;
    margin: 0 auto;
    padding: 20px;
}
#footer, .push /* needed for footer positioning*/ {
    padding: 5px;
    clear: both;
    position:absolute;/* needed for footer positioning*/
    bottom:0;/* needed for footer positioning*/
    height: -30px;/* needed for footer positioning*/
    width:1150px;
}

1 Ответ

1 голос
/ 14 апреля 2010

Вы можете получить «липкий нижний колонтитул», указав высоту тела, равную высоте окна вашего браузера (то есть: установив высоту на 100%), а затем заставив нижний колонтитул быть в нижней части любой высоты окна вашего браузера. есть.

CSS: 

body {
    height: 100%;
    position: relative;
}

#footer {
 position:absolute;
 bottom:0;
 height:60px;
 background:#ccc;
}

HTML: 

<html><body>

 text here text here

 <div id="footer">
  Im in the footer and bottom of the page!
 </div>

</body></html>
...