Html 嵌套的 Div 可以忽略父 Div 的宽度吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18785706/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can a nested Div ignore the parent Div width?
提问by SaturnsEye
Basically I have a nested <div>as a footer and the parent div is centered 1000px wide.
I was wondering if it was possible to extend the width of footer div so that it goes out of the parent to fit the browsers width but still keeps its place in the parent?
基本上我有一个嵌套<div>的页脚，父 div 居中 1000px 宽。我想知道是否可以扩展页脚 div 的宽度，使其脱离父级以适应浏览器的宽度，但仍保持在父级中的位置？
采纳答案by Mr_Green
My solution assumes that .parentelement has stretched height. even if it is not the case, then it seems you want the .footerelement stick to the bottom of the page. If it is so, then using position:absoluteyou can bring the child block out of the parent block and then pin it to bottom using bottom: 0pxand then to stretch its width use left:0pxand right: 0px.
我的解决方案假设.parent元素已拉伸高度。即使事实并非如此，那么您似乎希望.footer元素粘在页面底部。如果是这样，那么用position:absolute你可以把孩子屏蔽掉父块，然后将其固定到下使用bottom: 0px，然后伸展其宽度使用left:0px和right: 0px。
UPDATED:
更新：
Use this Doctype declaration:
使用这个 Doctype 声明：
<!DOCTYPE html>
Also, in .footerelement mention top:autocss property. Something like this:
此外，在.footer元素中提到top:autocss 属性。像这样的东西：
.footer{
padding: 0px 15px;
height: 50px;
background-color: #1A1A1A;
position:absolute;
bottom: 0px;
left: 0px;
right: 0px;
top: auto; /* added (IE FIX) */
}
回答by Purnil Soni
回答by Love Trivedi
Try this css this will definitely work as you want
试试这个 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%
}
回答by BenM
You could set the footer position to relative and set the left property to -100px and width to 1200px for example.
例如，您可以将页脚位置设置为相对位置，并将左属性设置为 -100px，将宽度设置为 1200px。
Better still don't have it in the parent div, have it as it's own div with it's own values set.
最好还是不要在父 div 中使用它，将它作为它自己的 div 并设置它自己的值。
回答by Bhojendra Rauniyar
Do like this
这样做
html
html
<div id="parent" class="wrap"></div>
<div id="footer"></div>
css
css
.wrap{width: 1000px;}
#footer{width: 100%;}
回答by Ruben Serrate
Try this CSS.
试试这个 CSS。
#footer {
position:absolute;
bottom:0;
width:100%;
}
