Question

所以我现在正试图在页面底部放置一个div作为页脚，而且当我使用CSS时，似乎我有这个反复出现的问题。每隔一段时间，我会遇到一个问题，无论我尝试将哪个定位代码应用于div /元素，它都无法正常工作。我尝试了多台计算机，不同的程序等，以确定它是否有问题，但我把它缩小到只是简单的坏代码，但我无法弄清楚它是什么。

这是CSS部分：

#footer{
    height:200px;
    width:1600px;
    border: 5px solid orange;
    background-color:white;
    position:absolute;
    padding-top:800px;

}

Answer 1

据我所知，您发现难以在不同屏幕尺寸或窗口调整大小时将页脚放置在底部。

请参阅this MDN reference on positioning。

position可以是static，relative，absolute或fixed中的一个。添加定位（静态除外，这是默认设置）会自动允许您访问属性top，bottom，left，right和z-index。

使用的定位类型决定了框的渲染。 static以文档顺序呈现元素，relative呈现类似静态的元素，但元素可以定位并在原始布局中留下间隙（如果移位）。在计算文档布局的维度时，absolute和fixed不会留下任何间隙并被跳过。

以下属性对于CSS规则在获取固定页脚时非常重要。

职位：绝对或固定
left：0
底部：0

jsfiddle

footer{
    height:50px;
  
    /*width:1600px;*/
    width:100%; /* Converted to fluid width */
  
    /*border: 5px solid orange;*/
    border-top: 5px solid orange; /* all around border triggers horizontal scrollbar. So use only top border*/
  
    background-color:white;
  
    position:absolute; /*or fixed*/
  
    /*padding-top:800px;*/ /* padding only adds space inside the box. so remove*/
  
    bottom:0; /* position the footer at the absolute bottom of the page*/
    left:0; /*position the footer to the absolute left of the page*/
}

<div id="contentPage">
  <header>
    <div>This is my header</div>
  </header>
  <section>
    <div>Content section</div>
  </section>
  <footer>
    <p>This is my footer</p>
  </footer>
</div>

Answer 2

我是网络开发的新手。但是你展示的CSS代码看起来很不错。我想也许你几天前遇到了同样的问题：

以下是相关部分：

在CSS中使用#时，是用HTML定义用id标识的div的属性，如果用class标识div，那么你应该在名称前使用.。如果你使用它，否则它将无法正常工作。对于预定义的div类型（例如：页脚，标题等，不需要令牌。

让它短暂：

在CSS中使用.令牌作为HTML中class标识的div。

在CSS中使用#令牌作为HTML中id标识的div。

对于预定义的div类型（页眉，页脚等），您不使用任何标记。

示例：

HTML：

<div class="box1">"bla bla bla"</div> <div id="box2">"more bla bla"</div> <h1>bla bla title</h1>

CSS：

.box1 {color: blue;} #box2 {color: red;} h1 {color:green;}

我希望如果您的问题与此相关，那么这个答案可以帮助您。

Answer 3

如果您希望页脚div浮动在页面底部，则必须设置： position: fixed bottom: 0 并删除top属性

现在，如果您希望页脚位于正文的底部（在页面末尾滚动），则不需要任何内容，因为默认情况下DIV总是相互命名。

我希望我能帮到你:)。

CSS代码没有应用于div？

3 个答案: