定位在容器元素

布局网页我设计的是这样的拨弄下一个div：http://jsfiddle.net/5sTub/定位在容器元素

编辑：注意：我没有试图让一个棘手的注脚。我只是想把它放在页面的底部。在回答之前请看小提琴

我想将页脚定位在页面的底部，但无法如您在上面的链接中看到的那样。我尝试了我在互联网上找到的所有东西，包括设置容器元素的位置：相对;和页脚的position:absolute;和bottom:0;，但似乎没有任何工作，事实上，如果您将容器div添加到代码并制作其position:relative;，并将以下css添加到页脚：position:absolute; bottom: 0;，页脚似乎在某处消失。自从很长一段时间以来，我一直对这个问题感到震惊，唯一的解决方案是设置我的标题，我的内容和页脚的position:static;，这是dosent服务器的目的，并且破坏整个布局，看起来很安静。我想避免使用JavaScript。请提前帮助，谢谢。

编辑：什么我需要说明： enter image description here

，其中蓝色是页脚，深蓝色的是头，淡蓝色的是实际的内容和粉红色的是一个棘手的股利。我不想让页脚变得粘滞，但是我希望它像在普通页面上可以找到的那样，唯一的问题是它不会留在页面底部（请参阅fiddle）

来源

2012-09-03 Peeyush Kushwaha

在SO上看到。如果您只想将页脚放在页面的底部，就不要放弃它，并且它会位于内容的下方。我不明白你的问题是什么。 – Bojangles

不，它的剂量低于内容，那是什么问题 –

是否有助于http://jsfiddle.net/5sTub/1/

来源

2012-09-03 12:25:02 Sowmya

正是我所期待的。 –

**对于同类问题的人来说**：为了在上面的小提琴中设置#wrapper百分比的高度，您必须先设置身体的高度！，最有可能的是，你也希望以百分比来设置身体的高度！ –

使用此

在你的CSS

html, body{height:100%} 


div#footer { 
     color: white; 
     background: rgba(68, 68, 68, 0.8); 
     width: 100%; 
     position:absolute; 
     bottom:0; 
    }

来源

2012-09-03 12:13:38 Carlos

正如我所说，我再次重申自己，我不是在寻找一个固定或粘性的页脚。我只想把它放在页面底部！ “页面底部” –

含糊不清！每个人都在对你想做什么进行最好的猜测，所以请解释你想要更好的行为。 – Bojangles

对不起，如果我没有让自己清楚。我现在增加了一个简单的例子来帮助你们更好地理解我的问题。 –

添加这个CSS属性可以使用粘页脚方法这一点。阅读本http://ryanfait.com/sticky-footer/

例如这样写：

HTML

<div class="container"></div> 

<div class="footer"></div>

CSS

body,html{ 
height:100%; 
} 
.container{ 
min-height:100%; 
} 
.footer{ 
height:40px; 
margin-top:-40px; 
}

来源

2012-09-03 12:15:07 sandeep

不是寻找一个粘性的页脚，而是我想将它放在页面底部 –

如果我的回答不是你想要的，那么@rohit的回答是对的。 – sandeep

我不知道，如果你解决了这个与否，但我遇到了类似的问题和解决如下：我觉得这是最令人困惑的问题，我已经

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN" " http://w3.org/TR/html4/loose.dtd"> 
<html> 
<style type="text/css" > 
div#mypage { 
    top:0; 
    background: purple; 
    color: white; 
} 
div#pageheader { 
    top:0; 
    left:0; 
    height: 20%; 
    position:absolute; 
    width:100%; 
    background: green; 
    color: white; 
} 
div#pagecontent { 
} 
div#contentleft { 
    display: inline-block; 
    background: blue; 
    position:absolute; 
    border-radius: 2px; 
    left:0%; 
    right: 15%; 
    width:15%; 
    height: 92.5%; 
    top: 5%; 
    color: white; 
} 
div#contentcenter { 
    display: inline-block; 
    background: yellow; 
    position:absolute; 
    border-radius: 2px; 
    left:15%; 
    right: 30%; 
    width:80%; 
    height: 92.5%; 
    top: 5%; 
    color: black; 
} 
div#contentright { 
    display: inline-block; 
    background: red; 
    position:absolute; 
    border-radius: 2px; 
    left:95%; 
    right: 5%; 
    width:5%; 
    height: 92.5%; 
    top: 5%; 
    color: white; 
} 
div#pagefooter { 
    color: white; 
    background: rgba(68, 68, 68, 0.8); 
    width: 100%; 
    height: 2.5%; 
    position:fixed; 
    left:0; 
    bottom:0; 
} 
</style> 
<head> 
<title>Multiple Div's</title> 
</head> 
<body bgcolor="#cccccc"> 
<div id="mypage"> 
    <div id="pageheader">HDR</div> 
    <div id="pagecontent">PAGE CONTENT 
     <div id="contentleft">LEFT</div> 
     <div id="contentcenter">CENTER</div> 
     <div id="contentright">RIGHT</div> 
    </div> 
    <div id="pagefooter">FOOTER</div> 
</div> 
</div> 
</body> 
</html>

来源

2015-04-14 05:35:34

您能否详细说明您的答案，并添加关于您提供的解决方案的更多描述？ – abarisone

定位在容器元素

回答

相关问题