css - 页脚不扩展

我很新的CSS，我仍然很难理解一些概念，特别是定位。无论如何，我的问题是，当我设置容器的position: relative;和我的页脚position: absolute; bottom: 0;页脚变小。它与我在放置这些代码之前应该放置的容器具有相同的宽度。我这样做是因为我希望我的页脚位于容器的最底部。css - 页脚不扩展

下面是截图：

enter image description here

栗色是页脚。

在我的页脚中，我不使用div，而是使用html元素<footer>。

我的CSS代码：

div#container { 
    height: 100%; 
    width: 1000px; 
    margin: auto; 
    background-color: #C9C9C9; 
    position: relative; 
} 

footer { 
    background-color: #340B09; 
    height: 50px; 
    position: absolute; 
    bottom: 0; 
}

请帮助。

来源

2012-09-08 TheOnlyIdiot

在小提琴中添加您的代码 – supersaiyan

您可以在页脚上设置宽度：100％吗？ – Eric

使用不灵活的单位（如px）时，要非常小心地设置高度。如果它包含的内容也是固定的（例如图片），但它会与文本混淆。某些浏览器允许您覆盖字体大小的选择，并且最终会使文本溢出您的容器，从而使其无法读取。 – cimmanon

我正确地通过声明页脚的宽度为980px来解决它;当我尝试1000px时，它变得比容器更宽，因为经过研究，我发现mozilla和webkit不包含宽度的填充。

来源

2012-09-10 10:05:12 TheOnlyIdiot

检查这一点，如果可以帮助您 https://developer.mozilla.org/samples/cssref/css-positioning.html

我也会鼓励你安装在浏览器中

也高于页脚萤火虫，增加一些DIV容器，给它一些高度。。因此页脚将停留在底部。不要明确地使用定位...因为你是新手。

给你自己一段时间后，你会在那里对it..with CSS位置的顶部： - ）

来源

2012-09-08 15:06:24

添加宽度：1000像素;到您的页脚

来源

2012-09-08 15:08:14 tsergium

bt其没有必要。添加宽度仪式.. – supersaiyan

我试过了，但它变得比容器更宽 – TheOnlyIdiot

您正在使用;

footer { 
    background-color: #340B09; 
    height: 50px; 
    position: absolute; 
    bottom: 0; 
}

如果footer一些ID或类，应该像#footer或.footer CSS并没有什么问题，如果你使用的是HTML5元素footer定义。

如果要拉伸元素以填充容器，请使用width: 100%。如果页脚位于container内，请将其添加到页脚。否则，它会延伸到屏幕。

来源

2012-09-08 15:21:52

他使用html5元素'footer'。 –

ya。他可能是。谢谢@MikeCorcoran :) –

您是否有必要使用相对和绝对定位？我在问，因为它有一个缺点，那就是页面的布局与所有不同尺寸的屏幕不一样。

既然你想显示页脚在容器的底部，所以在这里可以用这种方式完成。

<style type='text/css'> 

body{ 
    margin: 0px; 
    padding: 0px; 
    background-color: black; 
} 

#inbody{   /* main page */ 
    padding-top: 10px; 
    margin-top: 0px; 
    margin-left: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    padding-bottom: 10px; 
    height: 1170px; 
} 

#container{   /*container */ 
    padding: 10px;   
    margin-top: 10px; 
    margin-left: 30px; 
    margin-right: 30px;  
    height: 1130px; 
    background-color: orange;   
} 

#header{   /* header */ 
    margin-left: 168px; 
    height: 51px; 
} 

#midbody{   /* middle body */ 
    margin: 10px; 
    padding: 0px; 
    height: 999px; 
} 

#footer{   /* footer */ 
    padding: 10px; 
    height: 30px; 
    background-color: black; 
} 

</style>

此外，您可以更改每个部分的颜色以查看更改。还使用显示网页的HTML和CSS的检查元素。同样对于盒子模型概念，尝试在检查元素中进行度量。

来源

2012-09-08 15:39:50

css - 页脚不扩展

回答

相关问题