自动调整高度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覆盖页面的顶部和底部。有没有办法做到这一点？

答

#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;}

示例和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％”而不是屏幕的高度。

希望这会有所帮助。

自动调整高度div

相关推荐