How to fix the height of this div_问答_开发者_运维开发者技术经验分享

How to fix the height of this div

My problem is that the border for the main div doesn't extend to the bottom of the window.

Here's the stylesheet:

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

Here's the page source:

<!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>

I had to put breaks in main to see how the border would look. This is not ideal. I would like the border to display even if there's little to no content in the main div.

If you have any ideas on how to get it to extend all the way down to the bottom of the page, I'd really appreciate it.

Any other tips on cleaning up the CSS would als开发者_运维问答o be appreciated.

You have a classic equal height column problem. Here is just one of the many links to show you how to accomplish what you want: http://abcoder.com/css/css-equal-height-columns/

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

This is as close as I can come. Most credit goes to:

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

The main does not extend to the bottom of the window because its height is determined by the contents of the div. Just add more content and it will extend accordingly.

Even height:100% won't work because the body, and even the html, are only as high as they need to be. So making the main just as high as them isn't going to work.

Most elements prefer to only take up as much height as its content needs. Unfortunately you will just have to set the height explicitly.

Also look at this question for how to do it with Javascript.

You could also insert the min-height property which will give the #main div a minimum height and will also remain in place. However keep in mind that content may overlap or hide because of your minimum height be aware to adjust the height accordingly

#main {min-height:500px}

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>