如何讓div的風格與div的大小一致？

我在HTML文件中包含一個包含查詢所有搜索結果的div，因此它的大小是動態的。我給它用CSS編寫的以下樣式：如何讓div的風格與div的大小一致？

#content { 
position: absolute; 
width: 75%; 
min-height: 100%; 
left: 13%; 
right: 12%; 
top: 12%; 
background-color: #FFF; 
border-left: 3px solid #81DAF5; 
border-bottom: 3px solid #81DAF5; 
word-wrap: break-word; 
}

如果沒有多少搜索結果，。即如果它們都適合在屏幕上，但只要用戶必須滾動才能看到所有這些結果，div就會增長（溢出中的元素遵循CSS代碼中的位置指令），但是它的白色而邊界則沒有。這看起來非常愚蠢，我還沒有找到解決這個問題的方法。誰能幫幫我嗎？

編輯：我忘了提及，如果我用HTML文件中的段落文本手動做同樣的事情，一切都按預期工作，我。即該div擴展與我給了它的每種風格。

來源

2017-06-19 AlexM

您可以添加：

overflow-y: scroll;

在這一點上，盒子的大小保持不變，但它成爲滾動查看然而，許多結果有可能是。

編輯 -

或者，你可以嘗試：

min-height: 100%;

要允許它膨脹超過其初始大小。

來源

2017-06-19 22:30:03

是的，我知道，但是這不是我想要的，我想要的頁面是滾動的，但只能通過滾動條是已經存在於瀏覽器。 – AlexM

你看過最小高度：100％？這將設置高度爲100％，但隨後允許它根據內容進行擴展。 –

哦，該死的，我實際上用最小高度工作，我在上面輸入錯誤。但即便如此，這種奇怪的行爲仍然毫無意義，我手動填寫頁面與段落。在後一種情況下，足夠奇怪，它的行爲如預期。 – AlexM

柯克的答案將允許你滾動，但你可能想添加一個父元素的相對位置。這樣，當您將絕對定位元素的高度設置爲100％時，它將佔用父元素高度的100％。相對定位的父元素應該隨數據一起幹淨地擴展。

所以你可能想在這種情況下設計父元素的樣式。

<div class="parent"> 
    <div class="dynamic-content"></div> 
</div>

CSS：

.parent { 
    position: relative; 
    background-color: #FFF; 
    border-left: 3px solid #81DAF5; 
    border-bottom: 3px solid #81DAF5; 
    margin: 12% auto 0; 
} 

.dynamic-content { 
    height: 100%; 
    word-wrap: break-word; 
}

來源

2017-06-19 23:06:13 slotdp02

我試了一下，但是效果不好，似乎還有更多的代碼與我的代碼不兼容。不過，我知道這應該起作用。沒關係，我只是想出了另一種方式，但感謝您的幫助和時間。 – AlexM

如何讓div的風格與div的大小一致？

回答

相關問題