Question

enter image description here

我的问题是main div的边框没有延伸到窗口的底部。

这是样式表：

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的任何其他提示也将受到赞赏。

Answer 1

您有一个经典的相等高度列问题。以下只是向您展示如何完成所需内容的众多链接之一：http://abcoder.com/css/css-equal-height-columns/

Answer 2

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

Answer 3

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>

Answer 4

主要部分没有延伸到窗口的底部，因为它的高度由div的内容决定。只需添加更多内容，它就会相应扩展。

Answer 5

即使身高：100％也不会起作用，因为身体，甚至是html，都只有它们需要的高度。因此，使主要与他们一样高是不可行的。

大多数元素喜欢只占用内容需要的高度。不幸的是，你只需要明确设置高度。

另请参阅this question了解如何使用Javascript。

Answer 6

您还可以插入min-height属性，该属性将为#main div提供最小高度，并且也将保留在原位。但请记住，内容可能会重叠或隐藏，因为您的最小身高要注意相应地调整高度

#main {min-height:500px}

如何修复这个div的高度

6 个答案: