2017-01-02 103 views
1

我目前正在一个网站上工作,而且我对这个页脚不会停留在页面底部感到很生气。我已经检查了同样问题的其他主题,但没有解决我的问题。无法在页面底部设置页脚

当我尝试“相对”时,页脚在“topbox”(这是我的页眉)下面,而当我尝试“绝对”时,它会在页面中间。

<header> 
<div class="topbox"> 
<ul> 
<li><a class="active" href="#home">Home</a></li> 
<li><a href="#news">Services</a></li> 
<li><a href="#contact">Clients</a></li> 
    <li><a href="#contact">Contact</a></li> 
<li><a href="#about">About</a></li> 
</ul> 
</div> 
</header> 
<body> 
<div class="wrapper"> 
<div class="scrollbtn"><img src="Images/Scroll.png" style="width:40%"/>  
</div> 
<div class="bgbox"> 
<div class="box2"> 
<a> Lorem ipsum dolor sit amet, consectetur adipiscing elit... 
</a> 
</div> 
</div> 
<div id="footer">© 2017 "TEXT" All Rights Reserved</div> 
</div> 
</body> 

所以在这里我们有顶盒这是标题,包装,scrollbtn(鼠标的PIC指示需要滚动),bgbox(内容的背景),BOX2(内容)中,“lorep存有“是用户滚动的内容并且非常长。这是我的问题,当您向下滚动页面时,页脚处于页面底部,因此处于页面中间。

这里是CSS:

body, html { 
width:100%; 
height:100%; 
background-color: #060b0f; 
padding:0%; 
background-image: url('../images/background3.jpg'); 
background-size:cover; 
background-repeat: no-repeat; 
background-attachment: fixed; 
} 
/* HEADER */ 
.topbox { 
margin:0%; 
position: fixed; 
top:0%; 
left: 0%; 
width:100%; 
z-index:999; 
text-align:center; 
overflow: hidden; 
padding:0%; 
font-family:Impact; 
font-size:20px; 
} 
.topbox ul { 
    list-style-type: none; 
    margin: 0%; 
padding: 0%; 
overflow: hidden; 
background-color: #459cfe;} 

.topbox li { 
display: inline; 
} 
    .topbox li a { 
display: inline; 
color: black; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
} 
.topbox li a:hover:not(.active) { 
    background-color: #397fcd; 
} 
.active { 
    background-color: #fff; 
} 
/*HEADER FIN*/ 
.scrollbtn { 
position: absolute; 
bottom : 0%; 
left: 49%; 
} 

.hot { 
color:#4080e1; 
} 
.box2 { 
margin-top:0px; 
margin-left:10%; 
width : 70%; 
opacity:1; 
color: black; 
overflow: hidden; 
text-align:center; 
z-index:4; 

background-color:transparent; 


} 
.box2 a{ 
opacity:1; 
    } 
.bgbox { 
margin-top:0px; 
margin-left:8%; 
padding: 5%; 
padding-left: 8%; 
width : 70%; 
position: absolute; 
top : 10%; 
left: 0%; 
    background-color: rgba(255,255,255,0.5);  
overflow: hidden; 
text-align:center; 
z-index:3; 


} 
.bgbox:hover { 
background-color: rgba(255,255,255,0.9); 
} 

#footer { 
font-size:20px; 
cursor:pointer; 
color: black; 
text-align: center; 
width:100%; 
position:relative; 
left:0px; 
bottom:0px; 
background-color: #459cfe; 
} 
.wrapper { 
height:100%; 
} 

我已经尝试了很多不同的东西(改变车身高度,包一切,相对的,绝对的,固定的,静态的,...),我想不出其他的东西。我需要一个外部观点。

+0

'topbox'必须位于body标签内。我不是说这是一个修复,但只是指出这个问题,还是它的错字 –

+0

不,这不是一个错字,但它似乎并没有问题,谢谢 –

回答

0

你想根据父元素的底部来定位您的页脚对我的作品好。所以你必须给它一个位置:绝对

它会找到最近的父母不是“静态”来定位自己相对于。所以目前它会坐在“身体”的底部。如果你想让它坐在“.wrapper”的底部,给.wrapper一个“相对”的位置

编辑:好的我看到“bgbox”超出“标题”的问题。

1. 卸下所有“高100%” - 这台高度是一样的视区(可见的)

2. 你“bgbox”目前绝对位置 - 所以它赢得了”不会被其他内容“推倒”,并且随着它变得更大,它不会推动其他内容。我不确定你打算在这里。你想让“bgbox”成为网页常规内容的一部分吗?那样的话,把它定位:相对。 (我认为你不希望其他内容占据与bgbox相同的空间,因为你的文本里面有文字,你的css和名字中的“bg”让我觉得你可能从某处复制了一个模板,但是误解了它的原意bgbox?)

注意:你在body标签外面有一些HTML。我认为你在描述页面的HTML的一部分“头部”和可能链接到资源之间混淆了,“头部”只是一个DIV,其中包含了例如由语义信息使用的语义信息。搜索引擎。

+0

谢谢我'我会马上尝试它,但不,我没有与“头”混淆,这只是我把它放在外面的错误,它的工作,所以我喜欢它,因为它看起来更干净我 –

+0

我试着通过添加“位置:相对“包装和页脚刚刚消失>< –

+0

包装到位置:相对是可选的第二步。请参阅我的第一句话:将页脚设置为绝对位置: –

0

的这是正确的HTML代码,所有的代码不输出正确的做法首先:

<body> 
<header> 
<div class="topbox"> 
<ul> 
<li><a class="active" href="#home">Home</a></li> 
<li><a href="#news">Services</a></li> 
<li><a href="#contact">Clients</a></li> 
    <li><a href="#contact">Contact</a></li> 
<li><a href="#about">About</a></li> 
</ul> 
</div> 
</header> 
<div class="wrapper"> 
<div class="scrollbtn"><img src="Images/Scroll.png" style="width:40%"/>  
</div> 
<div class="bgbox"> 
<div class="box2"> 
<a> Lorem ipsum dolor sit amet, consectetur adipiscing elit... 
</a> 
</div> 
</div> 
<div id="footer">© 2017 "TEXT" All Rights Reserved</div> 
</div> 
</body> 

header标签必须body标签

第二件事,我试图与页脚位置代码中:绝对; 和

enter image description here

+0

它也适用于我,只要内容(Lorem ipsum。 ..)很短,但是如果我使它长一些,页脚停留在中间:/ –

+0

我真的没有,但是因为这只是简单的,所以可以使用@vadiser答案作为源文件并从它开始 –

1

这里是例子:

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 

 
main { 
 
    padding-bottom: 30px; 
 
} 
 

 
footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 30px; 
 
}
<body> 
 
    <header> 
 
    header 
 
    </header> 
 
    <main> 
 
    main 
 
    </main> 
 
    <footer> 
 
    footer 
 
    </footer> 
 
</body>

0

我不知道该怎么给他附于这一点,但我想爱德华·d寻找答案! 我第一次尝试删除所有“身高:100%;”这并没有立即解决问题,但显然是我的错误,因为它使“。body”和“.html 100%”的决议因此使所有其他“位置:绝对;” divs根据它移动。 但是真正的问题是Bgbox也是绝对的。只要我做了“位置:相对;”“#footer”根据它自己定位。非常感谢Edward D和所有想要帮助的人!

+0

以下是如何“接受”对你最有帮助的答案,它会给予回答者的声望,并帮助人们搜索类似的问题,找到有用的东西:http://stackoverflow.com/help/someone-answers。如果你仍然需要半透明背景尺寸的帮助来匹配完全不透明的文字,请发起一个新问题,我们将提供帮助:) –

+0

谢谢我的半透明背景作品像一个魅力(有趣的短语,因为我不相信在魅力),但如果我需要帮助,我会来这里!伟大的网站和伟大的人民。问题在30分钟内回答,问题在几个小时内解决。欢呼! –