自動調整高度div

假設我有一個頁面，並且在該頁面中，我有兩個div，一個名爲'bar'，另一個名爲'example'。該代碼是這樣的：自動調整高度div

<style> 
#example{ 

    float:right; 

} 
#bar { 
    width: 100px; 
    height:100%; 
    border: 1px solid red; 
    box-sizing: border-box 
} 
</style> 

<div id="example"><p>This is page content</p><p>This is page content</p></div> 
<div id="bar"></div>

現在，我的<p>標籤，像百倍格「示例」內內複製並粘貼段落，所以我的頁面的高度也會增加。我想讓我的div在複製粘貼段落數百次後自動調整頁面的高度，以便div覆蓋頁面的頂部和底部。有沒有辦法做到這一點？

來源

2017-04-23 John Wink

-1

#bar{ 
     height:auto; 
    }

這應該做的伎倆。 E：你的目標沒有被概括爲100％，在運行你的代碼後它看起來很雜亂，所以我認爲你想要bar內容在example之內，所以我調整了它。如果你想刪除分隔線，只需取出p和p:first-of-type樣式。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    #example { 
 
     float: right; 
 
    } 
 
    
 
    #bar { 
 
     width: 100px; 
 
     height: auto; 
 
     border: 1px solid red; 
 
     box-sizing: border-box 
 
    } 
 
    
 
    p { 
 
     border-top: 1px solid red; 
 
     padding-top: 10px; 
 
    } 
 
    
 
    p:first-of-type { 
 
     border: none; 
 
     padding: 0; 
 
    } 
 
    </style> 
 

 
    <body> 
 
    <div id="example"> 
 
     <div id="bar"> 
 
     <p>This is page content</p> 
 
     <p>This is page content</p> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

如果你想在框中居中文本只是做p{text-align:center;}

來源

2017-04-23 04:06:28 Josh

示例和bar是兩個獨立的div。他們不相互關聯。欄包含一些內容，而示例包含完全不同的內容。我試圖找到一種方式，讓這兩個不同的div的高度始終相同，高度將會變得更大。我希望這可以自動調整。 –

http://jsfiddle.net/PHjtJ/看看這個JS，可以讓你做到這一點。積分給Charles Ingalls [http://stackoverflow.com/users/1874138/charles-ingalls] – Josh

我不知道我完全理解這個問題，但是從我收集，你正試圖讓div的高度至少是屏幕的高度。如果是這樣，將它的高度設置爲min-height: 100vh應該可以做到。當你的代碼像現在這樣說「高度：100％」時，它僅僅意味着「使這個div成爲父div高度的100％」而不是屏幕的高度。

希望這會有所幫助。

來源

2017-04-23 04:32:06

自動調整高度div

回答

相關問題