主要问题与100％的高度div [英] Major problem with 100% height div

问题描述

>

  / *左侧菜单* / 
 .leftMenu {
 width：200px; 
 border：2px solid green; 
 float：left; 
 background-color：＃c0c0c0; 
} 
 
 / *主要内容区域* / 
 .mainBox {
 border：2px solid red; 
 background-color：#ffffff; 
} 
 .mainWrapper {
 border：2px solid white; 
} 
  

使用

 < div class =mainWrapper> 
< div class =leftMenu> 
 left 
< / div> 
< div class =mainBox> 
 main< br />< br />< br />< br />< br / 
< / div> 
< div class =clear>< / div> 
< / div> 
  

我如何使菜单扩展到底部？

请注意我已经尝试了人工列，但他们只是不工作，因为白色的主框只是在前面的某种原因。

解决方案

nofollow> http://jsfiddle.net/PH3t2/

我已添加 postion：absolute ， top：0 和 bottom：0 到您的左侧菜单

我给了mainBox padding-left：205px

我已经给mainWrapper position：relative

您可以随意向mainBox添加内容以查看leftMenu的增长。

---

要完成此操作并使其在IE6中工作，添加：

  .leftMenu，.mainBox {
 min-height：250px; 
 height：auto！important; 
 height：250px; 
} 
  

/* Left menu */
.leftMenu{
    width: 200px;
    border:2px solid green;
    float:left;
    background-color:#c0c0c0;
}

/* Main Content area */
.mainBox{
    border:2px solid red;
    background-color: #ffffff;
}
.mainWrapper{
    border:2px solid white;
}

With

<div class="mainWrapper">
    <div class="leftMenu">
        left
    </div>
    <div class="mainBox">
        main<br /><br /><br /><br /><br />
    </div>        
    <div class="clear"></div>
</div>

How the blazes do I get the left menu to extend to the bottom?

Please note I've tried faux columns but they just don't work as the white main box just is at the front for some reason.

解决方案

What about this?

http://jsfiddle.net/PH3t2/

I've added postion:absolute , top:0 and bottom:0 to your leftmenu

I've given mainBox padding-left: 205px

I've given mainWrapper position:relative

Feel free to add content to mainBox to see that leftMenu grows as well.

---

To finish this off and make it work in IE6, add:

.leftMenu, .mainBox {
    min-height: 250px;
    height: auto !important;
    height: 250px;
}

这篇关于主要问题与100％的高度div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！