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。