html5中的寬度樣式問題

-1

我已經創建了簡單的網頁，使用html5和css，css3。html5中的寬度樣式問題

我創造粘頁腳，這裏是代碼：

#footer { 
    position:absolute; 
    bottom:0; 
    color:#000; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#fff; 
}

，敷和標題樣式：

#wrap 
{ 
    width:100%; 
} 
header 
{ 
    width:960px; 
    margin:0 auto; 

}

從我上面的代碼

，我的網頁看起來像這樣：http://s2.postimg.org/6t4qokwxl/Untitled_1_copy.png

我需要顯示頁腳爲全角，但是當我從頁眉中刪除margin:0 auto;時，頁腳顯示完全全角，並且沒有正確顯示頁眉。

我需要顯示除footer寬度爲960px;頁腳需要全角。

我掙扎着，誰能幫助我？提前致謝。

來源

2014-10-20 deepika

請附上您的HTML以及。如果可能，請在JSFiddle示例中重現該問題。 – TylerH 2014-10-20 06:44:00

如果不知道HTML是如何構建的，很難回答，但從截圖判斷，需要將left: 0添加到頁腳CSS，否則它的左邊位置與其最近的包含塊看起來像是#wrap元素）。

提示：下一次，請在您的帖子中包含指向正在運行的代碼示例的鏈接。 :-)

來源

2014-10-20 06:46:20 Emil

你要做的按本琴：http://jsfiddle.net/u9he2jjp/

* { 
 
    margin: 0; 
 
} 
 
html, body { 
 
    height: 100%; 
 
} 
 
.page-wrap { 
 
    min-height: 100%; 
 
    /* equal to footer height */ 
 
    margin-bottom: -142px; 
 
} 
 
.page-wrap:after { 
 
    content: ""; 
 
    display: block; 
 
} 
 
.site-footer, .page-wrap:after { 
 
    height: 142px; 
 
} 
 
.site-footer { 
 
    background: orange; 
 
}

<div class="page-wrap"> 
 
    
 
    Content! 
 
     
 
</div> 
 

 
<footer class="site-footer"> 
 
    I'm the Sticky Footer. 
 
</footer>

來源

2014-10-20 06:46:28 Innodel

html5中的寬度樣式問題

回答

相關問題