html5中的宽度样式问题

2014-10-20 266 views -1 likes

-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中的宽度样式问题

回答

相关问题