如何解決這一高度的div

enter image description here 如何解決這一高度的div

我的問題是，對於main格邊框沒有延伸到窗口的底部。

這裏的樣式表：

body { 
    margin:0px; 
    padding:0px; 
    background-color:#F7F7F7; 
} 

#nav { 
    background-color:#F7F7F7; 
    border-top:10px solid #89B7C4; 
    height:45px; 
    padding-top:20px; 
    padding-left:200px; 
    border-bottom:1px solid #7597A1; 
} 

#nav a { 
    text-decoration:none; 
} 

#nav a:visited { 
    color:#000; 
} 

#sidebar { 
    float:left; 
    padding:15px; 
} 

#main { 
    float:left; 
    border-right:1px solid #7597A1; 
    width:800px; 
    margin-left:200px; 
    margin-top:0px; 
    margin-bottom:0px; 
    padding-top:10px; 
}

這裏的頁面的源代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> 
    <title>home: index</title> 
    <link href="/stylesheets/application.css?1305224655" media="screen" rel="stylesheet" type="text/css" /> 
    <script src="/javascripts/prototype.js?1304452925" type="text/javascript"></script> 
<script src="/javascripts/effects.js?1304452925" type="text/javascript"></script> 
<script src="/javascripts/dragdrop.js?1304452925" type="text/javascript"></script> 

<script src="/javascripts/controls.js?1304452925" type="text/javascript"></script> 
<script src="/javascripts/application.js?1304452925" type="text/javascript"></script> 
</head> 
<body> 

<div id="nav"> 
    #nav &middot; 
    <a href="#">link1</a> &middot; <a href="#">link2</a> &middot; <a href="#">link3</a> &middot; <a href="#">link4</a> 

</div> 
<div id="main"> 
    #main<br><br> 
    <br><br><br><br><br><br><br><br><br><br> 
</div> 


<div id="sidebar"> 
    #sidebar<br> 
    <a href="#">link1</a> <br> <a href="#">link2</a> <br> <a href="#">link3</a> <br> <a href="#">link4</a> 

</div> 
</body> 
</html>

我只好把斷裂處main看到的邊界是什麼樣子。這並不理想。即使main div中的內容很少或沒有，我也希望顯示邊框。

如果您對如何讓它一直延伸到頁面底部有任何想法，我會非常感激。

清理CSS的任何其他提示也將不勝感激。

來源

2011-05-12 user5243421

有關添加什麼高度：100％？ – Ruben 2011-05-12 18:32:50

@Mythje我試過了，但它似乎沒有做任何事情...... – user5243421 2011-05-12 18:33:34

什麼瀏覽器，你使用和當你指定的高度：100％是在CSS文件或HTML？ – VirtualTroll 2011-05-12 18:48:43

你有一個經典的等高欄問題。這裏只是衆多鏈接中的一個，告訴你如何實現你想要的東西：http://abcoder.com/css/css-equal-height-columns/

來源

2011-05-12 18:41:30 vinhboy

This should be a good start：

#left { 
 
    width: 14em; 
 
    float: right; 
 
} 
 
#right { 
 
    margin-right: 14em; 
 
    border-right: 1px solid grey; 
 
}

<div id="left"> 
 
    <ol> 
 
     <li>Lorem ipsum</li> 
 
     <li>Duis aute</li> 
 
     <li>Excepteur sint</li> 
 
     <li>Ut enim minim veniam</li> 
 
     <li>Lorem ipsum amet</li> 
 
     <li>Duis reprehenderit</li> 
 
     <li>Ut enim veniam</li> 
 
     <li>Ut enim veniam</li> 
 
    </ol> 
 
</div> 
 
<div id="right"> 
 
    <h1>Stretch the Background Color in a Two Column Layout</h1> 
 
    <p>The trick is to add the background color to the main container(in this case, id #canvas)<em>view the source for answer</em>.</p> 
 
    <div> 
 
     <h2>Lorem Ipsum</h2> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
     <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
 
    </div> 
 
</div>

來源

2011-05-12 18:34:02 gutierrezalex

問題在於邊界與'right' div中的內容一樣長。即使在那裏沒有文本，並且即使窗口比那個div中的內容長，我也希望邊框出現。 – user5243421 2011-05-12 18:37:05

min-height：Xpx？另外，會不會有一個情況下，正確的div不會有內容？另一種方法是創建一個1px點repeat-y，然後使用位置移動該線。 – gutierrezalex 2011-05-12 18:40:19

，因爲它的高度由div的內容確定的主要不延伸到所述窗口的底部。只需添加更多的內容，它就會相應地擴展。

來源

2011-05-12 18:41:03 Jawad

即使身高：100％也不會工作，因爲身體，甚至html只有他們需要的高度。所以讓主體和他們一樣高是不行的。

大多數元素只喜歡佔據其內容所需的高度。不幸的是，你只需要明確地設置高度。

另請參閱this question瞭解如何使用Javascript進行操作。

來源

2011-05-12 18:42:43 Tesserex

html,body 
{ 
    height:100%; 
} 
body { 
    margin:0px; 
    padding:0px; 
    background-color:#F7F7F7; 
} 

#nav { 
    background-color:#F7F7F7; 
    border-top:10px solid #89B7C4; 
    height:45px; 
    padding-top:20px; 
    padding-left:200px; 
    border-bottom:1px solid #7597A1; 
} 

#nav a { 
    text-decoration:none; 
} 

#nav a:visited { 
    color:#000; 
} 

#sidebar { 
    float:left; 
    padding:15px; 
} 

#main { 
    float:left; 
    border-right:1px solid #7597A1; 
    width:800px; 
    margin-left:200px; 
    margin-top:0px; 
    margin-bottom:0px; 
    padding-top:10px; 
    min-height:100%; 
}

這是儘可能接近我可以來。大部分歸功於：

http://www.sitepoint.com/forums/css-53/automatic-div-height-fill-100%25-screen-height-158987.html

來源

2011-05-12 18:50:23 tahdhaze09

你也可以插入分鐘-height屬性，這將給#main div的最低高度，也將留在原地。但是請記住，內容可能重疊或隱藏，因爲你最小高度的注意調節高度相應

#main {min-height:500px}

來源

2011-05-12 18:50:52 breezy

如何解決這一高度的div

回答

相關問題