HTML DIV延伸

Question

div.div1 { 
 
    position: relative; 
 
    border: 1px solid black; 
 
    height: 100px; 
 
    width: 100px; 
 
    padding: 10px; 
 
} 
 

 
div.div2 { 
 
    background-color: gray; 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
div.div3 { 
 
    position: absolute; 
 
    border: 1px solid red; 
 
    height: 20px; 
 
    width: 20px; 
 
    bottom: 10px; 
 
    left: 10px; 
 
}

<div class="div1"> 
 
    <div class="div2">Test 123</div> 
 
    <div class="div3">A</div> 
 
</div>

的高度我使用上面的代码与它两个div来显示一个大的div。对于第一个我使用position: absolute将其放置在div的左下角。

如何扩展第二个灰色高度，使其高出第一个5像素，但不必测量像素中的精确高度（如下图所示）？例如，我可以设置height: 50px;，但是有其他方法吗？

Answer 1

我会用一个Flexbox的方法，而不是绝对定位（在下面的CSS评论）

div.div1 { 
 

 
    display: flex; 
 
    flex-direction:column; 
 
    /* add the above styles*/ 
 
    
 
    border: 1px solid black; 
 
    min-height: 100px;   /*I would also change this to min-height otherwise it may cause issues if your text goes to 2 lines*/ 
 
    width: 100px; 
 
    padding: 10px; 
 
} 
 

 
div.div2 { 
 
    flex-grow:1;  /* make div grow to fill the space */ 
 
    margin-bottom:5px; /* minus the amount of margin you wanted */ 
 
    
 
    background-color: gray; 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
div.div3 { 
 
    /* remove absolute positioning */ 
 
    border: 1px solid red; 
 
    height: 20px; 
 
    width: 20px; 
 
}

<div class="div1"> 
 
    <div class="div2">Test 123</div> 
 
    <div class="div3">A</div> 
 
</div>

Answer 2

您可以在height设置使用calc在我下面的代码片段。该设置对于距离较低的DIV减去（5 + 2）的高度，边界和底部为100％减去（20 + 10 + 2），对于父区的填充减去第一个DIV的边界减去10px，高达49px。

div.div1 { 
 
    position: relative; 
 
    border: 1px solid black; 
 
    height: 100px; 
 
    width: 100px; 
 
    padding: 10px; 
 
} 
 

 
div.div2 { 
 
    background-color: gray; 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
    height: calc(100% - 49px); 
 
} 
 

 
div.div3 { 
 
    position: absolute; 
 
    border: 1px solid red; 
 
    height: 20px; 
 
    width: 20px; 
 
    bottom: 10px; 
 
    left: 10px; 
 
}

<div class="div1"> 
 
    <div class="div2">Test 123</div> 
 
    <div class="div3">A</div> 
 
</div>

Answer 3

编辑：我建议，如果你能专注于现代的浏览器功能，去了Flexbox的方式shown by Pete肯定比我波纹管所示的那些清洁方法。话虽这么说，这里的选择：

您可以使用calc动态确定的div2高度：

div.div1 { 
 
    position: relative; 
 
    border: 1px solid black; 
 
    height: 100px; 
 
    width: 100px; 
 
    padding: 10px; 
 
} 
 

 
div.div2 { 
 
    background-color: gray; 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
    height: calc(
 
    100% 
 
    - 20px /* div1: padding top and bottom */ 
 
    - 2px /* div1: border top and bottom */ 
 
    - 20px /* div3: height */ 
 
    - 2px /* div3: border top and bottom*/ 
 
    - 5px /* desired separation*/ 
 
); 
 
} 
 

 
div.div3 { 
 
    position: absolute; 
 
    border: 1px solid red; 
 
    height: 20px; 
 
    width: 20px; 
 
    bottom: 10px; 
 
    left: 10px; 
 
}

<div class="div1"> 
 
    <div class="div2">Test 123</div> 
 
    <div class="div3">A</div> 
 
</div>

就可以避免包括在你的计算，如果填充和边框宽度您将box-sizing设置为border-box（You might want to set this for all elements）：

div { 
 
    box-sizing: border-box; 
 
} 
 

 
div.div1 { 
 
    position: relative; 
 
    border: 1px solid black; 
 
    height: 100px; 
 
    width: 100px; 
 
    padding: 10px; 
 
} 
 

 
div.div2 { 
 
    background-color: gray; 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
    height: calc(
 
    100% 
 
    - 20px /* div3: height */ 
 
    - 5px /* desired separation */ 
 
); 
 
} 
 

 
div.div3 { 
 
    position: absolute; 
 
    border: 1px solid red; 
 
    height: 20px; 
 
    width: 20px; 
 
    bottom: 10px; 
 
    left: 10px; 
 
}

<div class="div1"> 
 
    <div class="div2">Test 123</div> 
 
    <div class="div3">A</div> 
 
</div>

Answer 4

有所谓的 '柔性' 这一相当新的，臀部的CSS属性你现在会爱上它，因为它完全不需要定位绝对等。我昨天做了类似的事情，我有一个垂直导航栏，我想o顶部的菜单和底部的菜单。在响应环境中;使用你的绝对定位方法会导致一个令人讨厌的混乱，因为它会阻止内容重叠。 Flex阻止了这一点！ Yeyyyyy

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在你的榜样，你想要做这样的事情：

.div1 { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: nowrap; 
    justify-content: space-around; 
} 
.div2 { 
    align-self: flex-start; 
    flex-grow:1; 
    width:100%; 
} 
.div3 { 
    align-self: flex-end; 
    width:100%; 
} 

现在你的DIV 3将永远是在底部。虽然现在.div3将扩展整个宽度，因此在div内插入您的内容和BOOM。