Question

基本上我有一个嵌套的<div>作为页脚，父div的中心是1000px宽。我想知道是否可以扩展页脚div的宽度，使其超出父级以适应浏览器宽度，但仍保留在父级中的位置？

enter image description here

Answer 1

我的解决方案假设.parent元素已拉伸高度。即使不是这种情况，你似乎也希望.footer元素粘在页面底部。如果是这样，那么使用position:absolute可以将子块从父块中移出，然后使用bottom: 0px将其固定到底部，然后使用left:0px和{{来扩展其宽度1}}。

Working Fiddle

<强>已更新：

使用此Doctype声明：

right: 0px

此外，在<!DOCTYPE html>元素提及.footer css属性中。像这样：

top:auto

Answer 2

适合你的东西：

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

Demo

Answer 3

您可以将页脚位置设置为relative，并将left属性设置为-100px，将宽度设置为1200px。

最好还是在父div中没有它，因为它是自己的div，并且它自己设置了值。

Answer 4

这样做

HTML

<div id="parent" class="wrap"></div>
<div id="footer"></div>

CSS

.wrap{width: 1000px;}
#footer{width: 100%;}

Answer 5

试试这个CSS。

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

Answer 6

试试这个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%
}

Answer 7

如果您真的想绕过父元素，则可以查看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>&nbsp;
    <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>&nbsp;
    <span>Bar</span>
  </div>

  <button>shameless_button</button>

</div>

嵌套Div可以忽略父Div宽度吗？

7 个答案: