首页 文章

使绝对定位div扩展父div高度

提问于
浏览 次
148

正如你在下面的CSS中看到的，我希望child2在child1之前定位自己 . 这是因为我正在开发的网站也应该在移动设备上运行，其中child2应该位于底部，因为它包含我想要的导航在移动设备上的内容之下 . - 为什么不是2个主页？这是在整个HTML中重新定位的唯一2个div，因此这个次要更改的2个主页是一种矫枉过正 .

HTML：

<div id="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

CSS：

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

child2具有动态高度，因为不同的子网站可以具有更多或更少的导航项 .

我知道绝对定位元素已从流中移除，因此被其他元素忽略 .
我尝试在父div上设置 overflow:hidden; ，但这没有帮助，clearfix也没有 .

我的最后一招将是javascript来相应地重新定位两个div，但是现在我将尝试看看是否存在这样做的非javascript方式 .

html css position master-pages parent-child

13 回答

  • -4

    你自己回答了这个问题：“我知道绝对定位的元素已从流中移除，因此被其他元素忽略了 . ”因此，您无法根据绝对定位的元素设置父级高度 .

    你要么使用固定的高度，要么需要涉及JS .

    回复于
  • 2

    虽然不可能使用 position: absolute 拉伸到元素，但通常可以避免绝对定位同时获得相同效果的解决方案 . 看看这个小提琴，解决你特定情况下的问题 http://jsfiddle.net/gS9q7/

    诀窍是通过浮动两个元素来反转元素顺序，第一个向右，第二个向左，所以第二个出现在第一个 .

    .child1 {
    width: calc(100% - 160px);
    float: right;
}
.child2 {
    width: 145px;
    float: left;
}

    最后，向父级添加一个clearfix并完成（请参阅fiddle以获取完整的解决方案） .

    通常，只要具有绝对位置的元素位于父元素的顶部，通过浮动元素就可以找到解决方法 .

    回复于
  • 119

    Feeela is right 但如果您反转 div 定位，您可以获得父项 div 收缩/扩展到子元素：

    .parent{
    postion: absolute;
    /* position it in the browser using the `left`, `top` and `margin` 
       attributes */
}

.child{
    position: relative;
    height: 100%;
    width: 100%;

    overflow: hidden;
    /* to pad or move it around using `left` and `top` inside the parent */
}

    这应该适合你 .

    回复于
  • 0

    有一种非常简单的方法可以解决这个问题 .

    您只需要在父div中使用display：none复制相对div中child1和child2的内容 . 说child1_1和child2_2 . 将child2_2放在最顶层，将child1_1放在底部 .

    当你的jquery（或其他）调用绝对div时，只需使用display：block AND visibility：hidden设置相应的div（child1_1或child2_2） . 相对的孩子仍然是隐形的，但会使父母的div更高 .

    回复于
  • 10

    我有类似的问题 . 为了解决这个问题（而不是使用正文，文档或窗口计算iframe的高度），我创建了一个包装整个页面内容的div（例如一个id =“page”的div），然后我使用了它的高度 .

    回复于
  • 0

    有一个非常简单的黑客可以解决这个问题

    这是一个说明解决方案的代码框：https://codesandbox.io/s/00w06z1n5l

    HTML

    <div id="parent">
  <div class="hack">
   <div class="child">
   </div>
  </div>
</div>

    CSS

    .parent { position: relative; width: 100%; }
.hack { position: absolute; left:0; right:0; top:0;}
.child { position: absolute; left: 0; right: 0; bottom:0; }

    你可以玩hack div的定位来影响孩子自己定位的位置 .

    Here's a snippet:

    html {
  font-family: sans-serif;
  text-align: center;
}

.container {
  border: 2px solid gray;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.stuff-the-middle {
  background: papayawhip
    url("https://camo.githubusercontent.com/6609e7239d46222bbcbd846155351a8ce06eb11f/687474703a2f2f692e696d6775722e636f6d2f4e577a764a6d6d2e706e67");
  flex: 1;
}

.parent {
  background: palevioletred;
  position: relative;
}

.hack {
  position: absolute;
  left: 0;
  top:0;
  right: 0;
}
.child {
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

    <div class="container">
      <div class="stuff-the-middle">
        I have stuff annoyingly in th emiddle
      </div>
      <div class="parent">
        <div class="hack">
          <div class="child">
            I'm inside of my parent but absolutely on top
          </div>
        </div>
        I'm the parent
        
     You can modify my height
        
     and my child is always on top
        
     absolutely on top
        
     try removing this text
      </div>
    </div>
    回复于
  • 7

    我提出了另一种解决方案，我不喜欢这项解决方案，但却完成了工作 .

    基本上复制子元素，使重复项不可见 .

    <div id="parent">
    <div class="width-calc">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>

    <div class="child1"></div>
    <div class="child2"></div>
</div>

    CSS：

    .width-calc {
    height: 0;
    overflow: hidden;
}

    如果这些子元素包含很少的标记，则影响将很小 .

    回复于
  • 0

    “你要么使用固定的高度，要么需要涉及JS . ”

    这是JS的例子：

    ---------- jQuery JS示例--------------------

    function findEnvelopSizeOfAbsolutelyPositionedChildren(containerSelector){
        var maxX = $(containerSelector).width(), maxY = $(containerSelector).height();

        $(containerSelector).children().each(function (i){
            if (maxX < parseInt($(this).css('left')) + $(this).width()){
                maxX = parseInt($(this).css('left')) + $(this).width();
            }
            if (maxY < parseInt($(this).css('top')) + $(this).height()){
                maxY = parseInt($(this).css('top')) + $(this).height();
            }
        });
        return {
            'width': maxX,
            'height': maxY
        }
    }

    var specBodySize = findEnvelopSizeOfAbsolutelyPositionedSubDivs("#SpecBody");
    $("#SpecBody").width(specBodySize.width);
    $("#SpecBody").height(specBodySize.height);
    回复于
  • 0

    现在有一种更好的方法可以做到这一点 . 您可以使用bottom属性 .

    .my-element {
      position: absolute;
      bottom: 30px;
    }
    回复于
  • 8

    这与@ChrisC建议的非常相似 . 它不使用绝对定位元素，而是使用相对元素 . 也许可以为你工作

    <div class="container">
  <div class="my-child"></div>
</div>

    你的css是这样的：

    .container{
    background-color: red;
    position: relative;
    border: 1px solid black;
    width: 100%;
}

.my-child{
    position: relative;
    top: 0;
    left: 100%;
    height: 100px;
    width: 100px;
    margin-left: -100px;
    background-color: blue;
}

    https://jsfiddle.net/royriojas/dndjwa6t/

    回复于
  • 2

    还要考虑下一个方法：

    CSS：

    .parent {
  height: 100%;
}
.parent:after {
  content: '';
  display: block;
}

    此外，因为你试图重新定位div考虑css网格

    回复于
  • 1

    绝对视图将自己定位在非静态定位的最近祖先（ position: static ），因此如果您想要针对给定父级定位绝对视图，请将父 position 设置为 relative ，将子项设置为 position 为 absolute

    回复于
  • 1

    试试这个，它对我有用

    .child {
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: 1;
}

    它会将子高度设置为父高度

    回复于

相关问题