0
我一直在處理有關divs高度的問題。它根本不會擴展甚至認爲是一個內容。首先，讓我告訴你在截圖的問題：分區的高度不擴大
那內容： 
和多數民衆的容器： 
正如你所看到的，容器是即使它包含很短具有一些長內容的元素。我嘗試過添加「overflow：auto」之類的東西但它只是增加了一些滾動條..不知道還有什麼我可以在這裏做..這是最重要的代碼：
HTML：
<div id="menu2" class="container">
<div id="mytextbox" class="col-sm-12 col-xs-12">
<h2 id="h2Box1" style="visibility: visible">Text from the box1</h2>
<h2 id="h2Box2" style="visibility: hidden">Text from the box2</h2>
<h2 id="h2Box3" style="visibility: hidden">Text from the box3</h2>
<h2 id="h2Box4" style="visibility: hidden">Text from the box4</h2>
<p id="pBox1" style="visibility: visible">Paragraph from the box1</p>
<p id="pBox2" style="visibility: hidden">Paragraph from the box2</p>
<p id="pBox3" style="visibility: hidden">Paragraph from the box3</p>
<p id="pBox4" style="visibility: hidden">Paragraph from the box4</p>
</div>
<div id="box1" class="col-sm-6 col-xs-3 mybox active-box">
<span class="hidden-xs">BOX NAME 1</span>
<span class="visible-xs">1</span>
</div>
<div id="box2" class="col-sm-6 col-xs-3 mybox">
<span class="hidden-xs">BOX NAME 2</span>
<span class="visible-xs">2</span>
</div>
<div id="box3" class="col-sm-6 col-xs-3 mybox">
<span class="hidden-xs">BOX NAME 3</span>
<span class="visible-xs">3</span>
</div>
<div id="box4" class="col-sm-6 col-xs-3 mybox">
<span class="hidden-xs">BOX NAME 4</span>
<span class="visible-xs">4</span>
</div>
</div>
CSS：
@media screen and (min-width: 992px) {
.container {
display: flex;
flex-flow: row wrap;
width: 40%;
margin-left: 30%;
margin-right: 30%;
padding-left: 0;
padding-right: 0;
}
#menu2 {
position: relative;
padding: 5% 0;
}
.mybox {
padding-top: 3%;
padding-bottom: 3%;
width: 30%;
font-size: 1.5em;
}
#mytextbox {
position:absolute;
top: 30%;
z-index: 2;
order: 3;
background:
linear-gradient(
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0.7)
),
url('./../images/Pattern.png') bottom no-repeat;
}
#box1 {
position: absolute;
top: 5%;
order: 1;
background-color: rgb(66,142,158);
margin-right: 25%;
margin-left: -28%;
}
#box2 {
position: absolute;
order: 2;
background-color: rgb(196,52,52);
margin-left: 30%;
right: -28%;
top: 5%;
}
#box3 {
position: absolute;
order: 4;
background-color: rgb(223,187,66);
margin-right: 30%;
margin-left: -28%;
bottom: 5%;
}
#box4 {
position: absolute;
order: 5;
background-color: rgb(80,139,97);
margin-left: 30%;
right: -28%;
bottom: 5%;
}
}
如果你有任何想法，請幫助！
UPDATE： 這就是我想實現：
所以我只是設置了這些箱子周圍的巨大的「文本框」，當我意識到我有一些問題存在，當我把這些小彩盒放在底部，它實際上不是「文本框」的底部，而是它的底部（「容器」）。事情是......我希望容器能夠與「文本框」一起擴展，所以它們的底部應該是平等的，然後我可以很容易地在它周圍設置這些小框。
你在說「盒子1」嗎？它比它包含的文本更高。有什麼問題？ –
難道你不認爲這是因爲職位：絕對; ？ –
爲什麼在這裏標記javascript？ – Rob