基本上我有一个嵌套<div>的页脚，父 div 居中 1000px 宽。我想知道是否可以扩展页脚 div 的宽度，使其超出父级以适应浏览器的宽度，但仍保留其在父级中的位置？
问问题
25537 次
7 回答
3
我的解决方案假定.parent元素已拉伸高度。即使不是这样，那么您似乎希望.footer元素粘在页面底部。如果是这样，那么使用position:absolute您可以将子块从父块中取出，然后使用将其固定到底部，然后使用和bottom: 0px拉伸其宽度。left:0pxright: 0px
更新：
使用这个 Doctype 声明：
<!DOCTYPE html>
此外，在.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) */
}
于 2013-09-13T12:13:44.803 回答
2
对你有用的东西：
.parent{
width: 300px; /* your parent width */
}
.footer{
height: 50px; /* your footer height */
position:absolute;
left: 0px;
right: 0px;
}
于 2013-09-13T12:47:34.060 回答
0
例如，您可以将页脚位置设置为相对，并将左侧属性设置为 -100 像素，宽度设置为 1200 像素。
最好还是不要将它放在父 div 中，将它作为它自己的 div 并设置它自己的值。
于 2013-09-13T11:58:21.177 回答
0
这样做
html
<div id="parent" class="wrap"></div>
<div id="footer"></div>
css
.wrap{width: 1000px;}
#footer{width: 100%;}
于 2013-09-13T11:58:39.257 回答
0
试试这个 CSS。
#footer {
position:absolute;
bottom:0;
width:100%;
}
于 2013-09-13T12:01:36.390 回答
0
试试这个 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%
}
于 2013-09-13T12:21:14.747 回答
0
如果您真的想绕过父元素，可以查看display:contents
https://css-tricks.com/get-ready-for-display-contents/
如果您出于某种逻辑原因需要一个 div 来包装元素，但又想要所有单独元素的样式，它确实是一个游戏规则改变者。
没有的例子：
.main {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: row;
}<div class="main">
<div class="title">
<h2>Foo</h2>
<span>Bar</span>
</div>
<button>shamefull_button</button>
</div>示例：
.main {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: row;
}
.title {
display: contents;
}<div class="main">
<div class="title">
<h2>Foo</h2>
<span>Bar</span>
</div>
<button>shameless_button</button>
</div>于 2020-10-12T07:19:54.673 回答