11

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

在此处输入图像描述

4

7 回答 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>&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>

于 2020-10-12T07:19:54.673 回答