如何解决这一高度的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

回答

相关问题