未将CSS代码应用于div？

所以我目前正试图在页脚的底部定位一个div，看起来我在使用CSS时遇到了这个重复出现的问题。每过一段时间，我都会遇到一个问题，无论我尝试将哪个定位代码应用于div/element，它都不起作用。我尝试了多台计算机，不同的程序等，以确定它是否有问题，但是我缩小了代码，只是简单的代码，但我无法弄清楚它是什么。未将CSS代码应用于div？

这里是CSS部分：

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

}

来源

2015-10-17 Sl0thzy

请缩小CSS的实际问题。甚至有几个注释掉的块只是这个问题的噪音。另外，请添加应用了CSS的HTML。 – GolezTrol

检查开发控制台以查看是否正在重写事件。 – csmckelvey

我想尝试使用位置：绝对自指定位置 – melvnberd

从我可以做出来，你在在不同的屏幕尺寸或窗口的大小调整的底部定位页脚发现难度。请参阅this MDN reference on positioning。

position可以是static,relative,absolute或fixed之一。添加定位（静态，这是默认设置除外）会自动允许您访问属性的顶部，底部，左侧，右侧和z-index。

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

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

位置是：绝对的或固定的
左：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>

来源

2015-10-17 00:40:29 santon

如果你想漂浮在页面底部的页脚股利，那么你必须设置： position: fixed bottom: 0 并取出top财产

现在，如果您希望页脚位于主体底部（在页面末尾滚动），则不需要任何内容，因为默认情况下DIV总是被命令为一个低音。

我希望我帮你:)

来源

2015-10-17 00:09:55 Jistycs

我一种新的Web开发。但是你展示的CSS代码对我来说看起来相当不错。我想，也许你有同样的问题，我过些天前：

这里来的相关部分：

当您使用CSS #，它是定义与所标识一个div的属性id在HTML中，并且如果您使用class标识您的div，则应在名称前使用.。如果你使用它，否则它将无法正常工作。而对于预定义格类型（例如：页脚，标题等，不需要令牌

使其SHORT：。

使用.令牌CSS通过class在HTML标识一个div

使用#令牌CSS通过id在HTML标识一个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;}

我希望，如果你的问题是与此相关的一些东西，这个答案可以帮助你。

来源

2015-10-17 00:50:27 Ffff

感谢您提供帮助！可悲的是，我确实已经设置了相关部分，因为只有当我开始进入定位时，情况才会停止。 – Sl0thzy

@ Sl0thzy。 :)有些东西告诉我，我可以帮你...（或者其他人也可以）。但**我们需要更多关于这个特定div的行为的信息。它的位置是否错误？尺寸错误？它根本不显示？有关包含它的div的一些信息，或许是**。尽可能地尝试嘘声。这会帮助我们帮助你，我个人很乐意提供帮助。 – Ffff

对不起哈哈我以为我已经覆盖了它。它基本上不会对我试图给予的立场作出反应，或者当它做到时，它不会按照要求做的事情做出反应。它只是应该在页面底部作为页脚的一种图片框架。 – Sl0thzy

未将CSS代码应用于div？

回答

相关问题