HTML創建與頁腳和頁眉和內容

動態頁面，以便與幫助，到目前爲止，我有這樣的：HTML創建與頁腳和頁眉和內容

當含量大，那麼所有顯示爲需要 - 性感。但是，當內容是例如1行footer offcourse堅持內容的底部。

我需要一些魔力，以便頁腳粘貼到內容的結尾，但是當內容小於頁面高度時-500像素（頁眉和頁腳固定）比頁腳必須保留在頁面的底部。如何做這樣的魔術？見所附圖片：

CSS：

* { 
padding: 0; 
margin: 0; 
} 

html, body { 
height: 100%; 
width: 100%; 
} 

body{ 
} 

.header{ 
width: 100%; 
height: 300px; 
padding-top: 30px; 
background-color: gold; 
} 

#content{ 
width: 100%; 

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 

background-color: yellow; 
} 

#footer{ 
width: 100%; 
height: 100px; 
position: relative; 
z-index: 1; 
background-color: orange; 
}

這裏是小提琴這個：http://jsfiddle.net/Cheese1991/VcK83/

enter image description here

例子：

從截圖數1我們可以看到，我們的頭（300px的邊距30px），動態大小的內容（從來不知道），但對於這個例子，假設200px和footer（100px）適合&（窗口）.height（），在這個例子中是775px。

因此，我們必須775-330-200-100 = 145px免費尺寸（白色空格）

我要實現從1到可能：

1）內容將採取自由空間大小，因此html，body等仍然保持775px，並且沒有溢出（正確大小的滾動條），因爲組件符合要求，所以我們不需要比我們更多的空間。

2）頁腳將自己定位在底部（不是位置予以確定在頁面上，因爲這樣的內容將它背後隱藏）

這裏是準備2張圖片

1） enter image description here

2） enter image description here

來源

2014-04-02 Cheese

可能重複[你怎麼頁腳留在網頁的底部？] （http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page） –

不是重複的，因爲在那例如，如果內容爲空，則仍然存在溢出 – Cheese

使用min-height到#content。見這 - jsfiddle

編輯

* { 
padding: 0; 
margin: 0; 
} 

html, body { 
height: 100%; 
width: 100%; 
} 

body{ 
} 

.header{ 
width: 100%; 
height: 300px; 
padding-top: 30px; 
background-color: gold; 
} 

#content{ 
width: 100%; 

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 

background-color: yellow; 
} 

#footer{ 
width: 100%; 
height: 100px; 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 

background-color: orange; 
}

，並使用此jQuery代碼

$(document).ready(function(){ 
    var $footer = $('#footer'); 

    var contentHeight = $('#content').outerHeight(); 
    var headerHeight = $('.header').outerHeight(); 
    var footerHeight = $footer.outerHeight(); 
    var bodyHeight = $('body').outerHeight(); 
    var headerPContentPFooter = contentHeight+headerHeight+footerHeight; 



    if(headerPContentPFooter > bodyHeight){ 
     $footer.css('position','relative'); 
    } 

    $(window).resize(function(){ 
    var contentHeight = $('#content').outerHeight(); 
    var headerHeight = $('.header').outerHeight(); 
    var footerHeight = $('#footer').outerHeight(); 
    var bodyHeight = $('body').outerHeight(); 

    var headerPContentPFooter = contentHeight+headerHeight+footerHeight; 

     if(headerPContentPFooter > bodyHeight){ 
      $footer.css('position','relative'); 
     }else{ 
      $footer.css('position','absolute'); 
     } 

    }); 
});

的

來源

2014-04-02 10:46:49

這可能幫助你[鏈接]（https://developer.mozilla.org/en-US/docs/Web/CSS/min-height） –

nop，這只是將像素添加到內容，以便它看起來像腳註在機器人上 – Cheese

你說，因爲我理解***頁腳堅持到內容的結尾，但當內容小於頁面高度-500像素（頁眉和頁腳固定）比頁腳必須保持在頁面底部。**因此，在jsfiddle中，從'#content'中刪除少量'span'，然後頁腳跳到頁面底部。不是你想要的嗎？如果沒有向我說清楚。 –

HTML創建與頁腳和頁眉和內容

回答

相關問題