[英]CSS div sections overlapping
我正在嘗試將一個包含頁眉,浮動在頁眉底部的導航選項卡,正文內容和頁腳的頁面放在一起。 這應該相當容易,但是我遇到了一個奇怪的結果。
菜單必須浮動在標題圖像上,因為該圖像可能是靜態的,也可能是滑塊...或者可能是嵌入式Google地圖。
我已經模擬了下面的代碼,並且實質上是CSS。 問題是,即使我將頁腳設置在底部,但是當我查看頁面並且主體具有足夠的內容時,頁腳似乎漂浮在主體內容上,並且主體內容超出了頁腳的底部。
這是我的代碼。
非常感謝比我更聰明的人,看着我並提出任何建議。
<style>
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
padding:0;
margin: 0;
}
#header > img{
width: 100%;
}
.mynavigation{
margin-left: auto;
margin-right: auto;
color: #fff;
}
.mynavigation li {
display: inline-block;
text-decoration: none;
padding: 15px 25px 30px 25px;
z-index: 100;
color: #fff;
margin-top: 310px;
font-family: avenirltstd-black;
text-transform: uppercase;
letter-spacing: 5px;
}
.mynavigation li.is-active {
color: #474747;
background-color: #fff;
}
.mynavigation li a{
color: #fff;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #474747;
text-align: center;
}
</style>
<div id="header">
<img src="/images/myimage" />
</div>
<div id="mynavigation">
<!-- css makes this a tab menu and it needs to position at the bottom of the image <div> -->
<!-- so it looks like a white tab that is merged wit the whit body to look as if they are whole/together -->
<ul>
<li>Home</li>
<li>Examples</li>
<li>Other</li>
<li>Last</li>
</ul>
</div>
<div id="bodycontent">
<!-- page content goes here and has a white background -->
</div>
<div id="footer">
<!-- footer content here -->
</div>
工作小提琴http://jsfiddle.net/u2qL4j8a/2/
您錯誤地將用於導航和頁腳的CSS選擇器作為類提及,而在HTML中您將其作為ID提及。
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
padding:0;
margin: 0;
}
#header > img{
width: 100%;
}
#mynavigation{
margin-left: auto;
margin-right: auto;
color: #fff;
position: fixed;
top: 0;
left: 0;
}
#mynavigation li {
display: inline-block;
text-decoration: none;
padding: 15px 25px 30px 25px;
/*z-index: 100;
color: #fff;
margin-top: 310px;*/
font-family: avenirltstd-black;
text-transform: uppercase;
letter-spacing: 5px;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #474747;
text-align: center;
}
使您的HTML結構如下所示:
<html>
<head>
</head>
<body>
<div id="header"></div>
<div id="mynavigation"></div>
<div id="content">
<!-- CONTENT STUFF -->
</div>
<div id="footer"><!-- FOOTER STUFF --></div>
</body>
</html>
...而您的CSS像這樣:
html{
padding: 0;
margin: 0;
}
body{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
#mynavigation{
position: absolute;
top: 350px;
height: 50px;
width: 100%;
}
#content{
position: absolute;
top: 350px;
bottom: 100px;
width: 100%;
overflow: auto;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.