Css 嵌套Div是否可以忽略父Div宽度？_Css_Html

Css 嵌套Div是否可以忽略父Div宽度？

css html

Css 嵌套Div是否可以忽略父Div宽度？,css,html,Css,Html,基本上，我有一个嵌套的作为页脚，父div的中心宽度为1000px。我想知道是否有可能扩展footer div的宽度，使其离开父级以适应浏览器的宽度，但仍保持其在父级中的位置例如，您可以将页脚位置设置为相对，将left属性设置为-100px，将width设置为1200px 最好还是不要将它放在父div中，将它作为自己的div，并设置自己的值。这样做 html 试试这个CSS #footer { position:absolute; bottom:0; width:100

基本上，我有一个嵌套的

作为页脚，父div的中心宽度为1000px。我想知道是否有可能扩展footer div的宽度，使其离开父级以适应浏览器的宽度，但仍保持其在父级中的位置

例如，您可以将页脚位置设置为相对，将left属性设置为-100px，将width设置为1200px

最好还是不要将它放在父div中，将它作为自己的div，并设置自己的值。

这样做

html

试试这个CSS

#footer {
    position:absolute;
    bottom:0;
    width:100%;
}

我的解决方案假设

.parent

元素具有拉伸高度。即使不是这样，您似乎也希望

.footer

元素粘贴到页面底部。如果是这样，则使用

position:absolute

可以将子块从父块中取出，然后使用

bottom:0px

将其固定到底部，然后使用

left:0px

和

right:0px

来拉伸其宽度

已更新：

使用此Doctype声明：

<!DOCTYPE html>

试试这个css，它一定会像你想的那样工作

html,body{
    height: 100%;
    padding: 0px;
    margin: 0px;
}
.parent{
    width: 400px;/*put your width here*/
    height: 100%;
    background-color: #ccc;    
    margin: 0 auto;
}
.footer{
    padding: 15px 0px;
    height: 30px;
    background-color: #000;
    position:absolute;
    bottom: 0px;
    left: 0px;
    width:100%
}

对你有用的东西：

.parent{
    width: 300px; /* your parent width */
}
.footer{
    height: 50px; /* your footer height */
    position:absolute;
    left: 0px;
    right: 0px;
}

如果您确实想绕过父元素，可以查看

display:contents

如果出于某种逻辑原因需要一个div来包装元素，但需要所有独立元素的样式，那么它确实是一个游戏规则改变者

没有以下内容的示例：

.main{
对齐项目：居中；
框大小：边框框；
显示器：flex；
弯曲方向：行；
}


福
酒吧
按钮
可能有几种方法来实现这一点，但是为什么不把页脚放在父外呢？我是新手使用DIV，当我把页脚放在父母的外面时，它就在我的页面中间。我把它放在parent div中，这样它就会出现在其他所有内容的底部。这在你的身体内容超出浏览器窗口时是不起作用的（即，浏览器有一个滚动条显示。请尝试。当您向下滚动时会出现问题。@purnisoni在这种情况下，请使用position:fixed
而不是position:absolute
。已修改您的小提琴示例。请访问@purnisoni，无需position:fixed
。只需删除用于pi的bottom:0px
将.footer
元素移到底部..这很好，但在IE上，页脚不在底部：（love trivedi这是@Mr_Green在其解决方案中提供的。希望您不要复制粘贴他人的工作。
.footer{
    padding: 0px 15px;
    height: 50px;
    background-color: #1A1A1A;
    position:absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: auto;  /* added (IE FIX) */
}

html,body{
    height: 100%;
    padding: 0px;
    margin: 0px;
}
.parent{
    width: 400px;/*put your width here*/
    height: 100%;
    background-color: #ccc;    
    margin: 0 auto;
}
.footer{
    padding: 15px 0px;
    height: 30px;
    background-color: #000;
    position:absolute;
    bottom: 0px;
    left: 0px;
    width:100%
}

.parent{
    width: 300px; /* your parent width */
}
.footer{
    height: 50px; /* your footer height */
    position:absolute;
    left: 0px;
    right: 0px;
}