BS 3.0粘性頁腳，具有100％高度的子div

我正在使用粘性頁腳方法用於Bootstrap 3.0，如其示例中所述。我有它工作得很好，這不是我正在努力。BS 3.0粘性頁腳，具有100％高度的子div

它要求包裝有以下幾點：

html, 
body { 
height: 100%; 
/* The html and body elements cannot have any padding or margin. */ 
} 

/* Wrapper for page content to push down footer */ 
#wrap { 
min-height: 100%; 
height: auto; 
/* Negative indent footer by its height */ 
margin: 0 auto -60px; 
/* Pad bottom by footer height */ 
padding: 0 0 60px; 
}

現在我想裏面有一些100％高度容器，我不能因爲有自動對父的高度。有沒有辦法解決這個問題，並保持我的粘腳？我想放100％高度的容器，以便我可以放入背景。

感謝

來源

2013-11-27 Work-Together2013

-1

我不認爲#wrap高度設置爲100％，對粘頁腳的不利影響..

/* Wrapper for page content to push down footer */ 
#wrap { 
    min-height: 100%; 
    height: 100%; 
    /* Negative indent footer by its height */ 
    margin: 0 auto -82px 0; 
    /* Pad bottom by footer height */ 
    padding: 0 0 80px 0; 
}

工作演示：http://bootply.com/97103

來源

2013-11-27 20:21:29 ZimSystem

嘗試增加的內容很多身體。 – thgaskell

是的..好點。 – ZimSystem

我已閱讀關於jQuery的粘腳，並想知道這是否是我唯一的解決方案。我想要做的是在左側放置可拉伸/全高的背景，並在右側放置內容。它將成爲Wordpress中的頁面模板，因此內容的數量會有所不同。 –

我不太確定此解決方案是否符合您的需求，但它涉及絕對定位側邊欄後面的div，並通過將top和bottom設置爲0來使其伸展高度#wrap。它基本上繼承高度，同時避免顯式聲明高度屬性。唯一的潛在問題是，如果你在邊欄上方有其他元素（即標題），因爲div也會延伸到這些元素之後。

http://jsfiddle.net/qaB8D/

#wrap { 
    position: relative; 
} 

aside, #words { 
    /* This is just so the sidebar stays left, and the text stays right */ 
    display: table-cell; 
} 

aside { 
    width: 100px; 
} 

aside:before { 
    content: ''; 
    position: absolute; 
    background-color: red; 
    top:0; 
    bottom: 0; 
    width: inherit; 
    z-index: -10; 
} 

/* include Sticky Footer code/*

來源

2013-11-28 02:13:31 thgaskell

BS 3.0粘性頁腳，具有100％高度的子div

回答

相關問題