2

I have two divs inside another div--one with a background color, the other with just white.

I keep trying to figure out out to be able to get both of them to stretch to the bottom of the outer div, depending on whichever on is longest, without leaving a white space on the left div or cutting off the background or content on one of them. I always end up cutting off the left div.

In the project both divs are dynamic and can be anywhere from empty to really long. I would like to show a solid color to the bottom of the page on the left side when the menu is longer than the content on the right. Likewise, when the content is shorter then the menu, I don't want have anything cut off.

I have created a jsfiddle example of my problem that I'm having: http://jsfiddle.net/nKATZ/

It looks right if the menu is shorter then the body: http://jsfiddle.net/nKATZ/1/

Here is the code:

html 

<div class="mainBox">
<div class="leftBox">
    <a href="#">here</a><br />
    <a>here</a><br />
    <a>here</a><br /><a>here</a><br />
    <a>here</a><br />
    <a>here</a><br />
    <a>here</a><br />
    <a>here</a><br />
    <a>here</a><br />
    <a>here</a><br />
</div>
<div class="rightBox">
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
</div>
<div class="clear" ></div>
</div>

css 

body {
    background: #15384C;
    font-family: 'Dosis', sans-serif;
}
.mainBox {
    margin-right: auto;
    margin-left: auto;
    width: 960px; 
    background: white;
    position: relative;
    padding: 0px;
    overflow: vissable;
}
.leftBox {
    float: left;
    width: 200px;
    background-color: #CF4A41;
}
.rightBox {
    width:720px; 
    float: right;
}
.clear {
    clear:both;
}
4

2 回答 2

2

尝试这个：

body {
    background: #15384C;
    font-family: 'Dosis', sans-serif;
}
.mainBox {
    margin-right: auto;
    margin-left: auto;
    width: 960px; 
    background: white;
    position: relative;
    padding: 0px;
    overflow: hidden;

}
.leftBox {
    float: left;
    width: 200px;
    background-color: #CF4A41;
    margin-bottom: -2000px;
    padding-bottom: 2000px; 
}
.rightBox {
    width:720px; 
    float: right;
}
.clear {
    clear:both;
}
于 2013-04-19T21:18:16.257 回答
1

我认为这两行将解决您的问题。 

.leftBox {
    float: left;
    width: 200px;
    background-color: #CF4A41;
    height: 100%; /* add this line */
    position: absolute;  /* and this line */
}

演示

于 2013-04-19T21:24:13.347 回答