位置絕對包裝後的粘性頁腳

我有一個包裝，它需要水平居中。除了使用絕對位置之外，我知道沒有其他方法可以做到。位置絕對包裝後的粘性頁腳

#wrapper { 
    width: 721px; 
    height: 720px; 
    position: absolute; 
    margin: auto; 
    top: 136px; 
    left: 0; 
    right: 0; 
    background: white; 
    clear: both; 
}

它包含三個其他的浮動divs。如果我將包裝的位置更改爲相對位置，則這些div會混亂。

____________________________________________ 
header 
____________________________________________ 

     __wrapper____________ 
     |   |   | 
     |   |   | 
     | div1 | div2  | 
     |   |   | 
     |   |   | 
     |   |   | 
     |_________|__________| 
     |  div3   | 
     |____________________| 

__________________________________________ 
footer 
__________________________________________

但是我想要一個粘滯的頁腳，它總是在網站的底部。無論我有多少內容，它都會停留在底部。如果我的包裝不是位置：絕對的，我可以實現它，但由於它不能推動頁腳底部，我想知道是否有其他方法可以做到這一點？

.footer { 
    border-top: 1px solid #dcdcdc; 
    max-width: 100vw; 
    font-weight: bold; 
    text-align: center; 
    background: #f0f0f0; 
    width: 100%; 
    height: 80px; 
}

正如您在JS-FIDDLE中看到的，頁腳隱藏在標題後面。

來源

2016-12-07 Mirakurun

發佈完整的代碼片段 –

@SauravRastogi新增JS-小提琴 – Mirakurun

你使用引導？自舉，你的佈局會像這段代碼那樣簡單：

<div class="navbar navbar-fixed-top"> 
    you header 
</div> 

<div class="row"> 
<div class="col-md-3 col-md-offset-3"> 
    your div1 
</div> 
<div class="col-md-3 col-md-offset-6"> 
    your div2 
</div> 
</div> 
<div class="row"> 
<div class="col-md-6 col-md-offset-3"> 
    your div3 
</div> 
</div> 


<div class="navbar navbar-fixed-bottom"> 
    your footer 
</div>

，分給CSS：

html, body { 
    padding-bottom: 55px; 
    padding-top: 55px; 
}

由於這應該符合導航欄以及在頂部和底部兩側。

編輯：因爲你不使用框架，然後：

添加這個CSS頁腳。

position: fixed; 
bottom: 0;

這將顯示頁腳，因爲它隱藏在標題後面。

來源

2016-12-07 13:41:19 Nihvel

不，我沒有使用任何框架。我正在做這個純粹的。 – Mirakurun

你應該嘗試的CSS clear屬性（在我來說，我已經使用了div類叫做clearfix），把這個後.box2，如：

.clearfix:after { 
    content: ''; 
    display: table; 
    clear: both; 
} 
.clearfix:before { 
    content: ''; 
    display: table; 
}

看一看下面的代碼片段（使用全屏模式）：

.header { 
 
    min-width: 720px; 
 
\t top: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t max-width: 100vw; 
 
\t line-height: 80px; 
 
\t font-weight: bold; 
 
\t text-align: center; 
 
\t margin: 0 auto; 
 
\t border-bottom: 1px solid #dcdcdc; 
 
\t background: #f0f0f0; 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 80px; 
 
    z-index: 1; 
 
} 
 
#wrapper { 
 
    border: 1px solid blue; 
 
    width: 721px; 
 
\t background: white; 
 
    margin: 120px auto 40px; 
 
} 
 
.box1 { 
 
    clear:both; 
 
    display: inline-block; 
 
    float:left; 
 
    height:300px; 
 
    width:360px; 
 
    border: 1px solid black; 
 
} 
 
.box2 { 
 
    clear:both; 
 
    display: inline-block; 
 
    float:right; 
 
    height:300px; 
 
    width:350px; 
 
    border: 1px solid black; 
 
} 
 
.footer { 
 
    border-top: 1px solid #dcdcdc; 
 
    max-width: 100vw; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    background: #f0f0f0; 
 
    width: 100%; 
 
    height: 80px; 
 
} 
 
.clearfix:after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
} 
 
.clearfix:before { 
 
    content: ''; 
 
    display: table; 
 
}

<div class=header> 
 
Asdf 
 
</div> 
 
<div id="wrapper"> 
 
    <div class="box1"> asdf</div> 
 
    <div class="box2"> asdf</div> 
 
    <div class="clearfix"></div> 
 
</div> 
 
<footer class="footer"> 
 
ASDAFASFAFASFSAF 
 
</footer>

希望這有助於！

來源

2016-12-07 14:02:57

嗯，我想你沒有仔細閱讀這個問題。我的包裝有位置：絕對，我不能沒有它，因爲那些內部divs飄走。 – Mirakurun

@Mirakurun但我認爲這也會給你相同的外觀和根據你的小提琴倒下。 –

這是一個粗略的投擲，但在現代網絡發展中，我們獲得了美妙的柔性箱的樂趣。下面是一個簡單的例子

<div class="wrapper"> 
<div class="flex-wrapper"> 
    <div class="flex-container"> 
    <div class="div1">Box1</div> 
    <div class="div2">Box2</div> 
    </div> 
    <div class="div3">Box3</div> 
</div> 
</div> 

.wrapper { 
    display:flex; 
    justify-content: center; 
    align-content: center; 
    height: 500px; 
} 
.flex-wrapper { 
    display:flex; 
    flex-direction: column; 
    align-self: center 

} 
.flex-container{ 
    display: flex; 
    position: relative; 
} 
.div1,.div2 { 
    height:100px; 
    width:100px; 
} 
.div1 { 
    background-color:blue; 
} 
.div2 { 
    background-color:red; 
} 
.div3 { 
    background-color:green; 
    width:200px; 
    height:100px; 
}

只需使用類型的佈局，但是再拍容器周圍，使頁腳心不是影響了「包裝」。

https://jsfiddle.net/wxokadrx/

此外，如果你不熟悉的Flexbox的：https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

來源

2016-12-07 14:06:55

如果妳不想使用彎曲，這可能有助於

首先，它是沒有必要使用位置絕對水平對齊一個div。

<div id="outer"> 
<div id="inner"> 
</div> 
</div> 

<style> 
#outer { 
    background-color: green; 
} 
#inner { 
    left: 0; 
    right: 0; 
    margin: auto; 
    height: 300px; 
    width: 400px; 
    background-color: red; 
} 
</style>

這裏是小提琴https://jsfiddle.net/x2j325n4/

浮動內div的下降包裝爲0px的高度。所以用display：inline-blocks替換浮動可能會有所幫助。

<style> 
#header { 
    width: 100%; 
    height: 50px; 
    background-color: pink; 
} 
#wrapper { 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: 60%; 
} 
#div1 { 
    width: 30%; 
    height: 400px; 
    display: inline-block; 
    background-color: grey; 
} 
#div2 { 
    display: inline-block; 
    width: 60%; 
    height: 400px; 
    background-color: red; 
} 
#div3 { 
    width: 100%; 
    height: 400px; 
    display: inline-block; 
    background-color: blue; 
} 
#footer { 
    width: 100%; 
    height: 50px; 
    background-color: green; 
} 
</style> 
<div id="header"> 
    Hey i'm header 
</div> 

<div id="wrapper"> 
<div id="div1"> 
    first div 
</div> 
<div id="div2"> 
    second div 
</div> 
<div id="div3"> 
    third div 
</div> 
</div> 


<div id="footer"> 
    Hey i'm footer 
</div>

小提琴：https://jsfiddle.net/rjhwxdL5/

或者如果u希望頁腳留在你的視口的底部，只需使用position: fixed; bottom: 0;在您的頁腳

來源

2016-12-07 14:35:52

位置絕對包裝後的粘性頁腳

回答

相關問題