CSS代码不适用于div？ [英] CSS code not being applied to divs?

问题描述

所以我目前正试图在底部的页脚定位一个页脚，似乎我有这个重现的问题，当谈到我使用CSS。每隔一段时间，我会遇到一个问题，无论什么定位代码，我尝试应用到一个div /元素，它只是不会工作。我试过多台电脑，不同的程序等，以确定是否是一个问题，但我把它缩小到只是简单的坏代码，但我不知道是什么。

这里是CSS部分：

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

解决方案

我可以证明，你发现很难在不同屏幕尺寸的底部定位页脚或调整窗口大小。

请参阅此MDN定位参考。

位置可以是 static ， relative ， absolute 或固定。
添加定位（除静态之外，默认情况下）会自动允许您访问顶部，底部，左侧，右侧和z-index属性。

所使用的定位类型决定了框的渲染。
static 以文档顺序呈现元素， relative 呈现为静态，但元素可以定位并离开如果偏移，原始布局中的间隙。 absolute 和固定不会留下任何空白，并在计算文档布局的尺寸时跳过。

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

1. position：absolute或fixed


2. left：0


3. bottom：0
b
$ b

jsfiddle





  footer {height：50px; / * width：1600px; * / width：100％; / *转换为流体宽度* / / * border：5px纯橙色; * / border-top：5px solid orange; / *全部边框触发水平滚动条。所以只使用顶部边框* / background-color：white; position：absolute; / *或固定的* / / * padding-top：800px; * / / * padding只在框内增加空间。所以删除* / bottom：0; / *将页脚置于页面的绝对底部* / left：0; / *将页脚放在页面的绝对左侧* /}  

 < div id =contentPage> < header> < div>这是我的标题< / div> < / header> < section> < div>内容部分< / div> < / section> < footer> < p>这是我的页脚< / p> < / footer>< / div>  




So I am currently trying to position a div at the bottom page for a footer, and it seems that I have this reoccurring problem when it comes to me using CSS. Every once in a while, I will run into an issue where no matter what positioning code I try to apply to a div/element, it just will not work. I tried multiple computers, different programs etc to figure out if it was a problem with that, but I narrowed it down to just simply bad code but I can not figure out what it is.

Here is the CSS section:

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

}

解决方案

From what I can make out, you are finding difficulty in positioning your footer at the bottom across different screen dimensions or on resize of the window.

Please refer to this MDN reference on positioning.

position can be one of static, relative, absolute or fixed. Adding positioning (other than static, which is the default) automatically allows you access to the properties top, bottom, left, right and z-index.

The type of positioning used determine the rendering of boxes. static renders elements in document order, relative renders like static, but the elements can be positioned and leave gaps in the original layout if shifted. absolute and fixed does not leave any gaps and are skipped while calculating dimensions for the document layout.

The following properties are significant for your CSS rule to work in getting a fixed footer.

1. position: absolute or fixed
2. left:0
3. bottom: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>

这篇关于CSS代码不适用于div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！