Question

我正在为一个应用程序的流体布局工作，我想要一个固定的宽度＆amp;根据父div的内容的div的动态高度。基本上，我有一个侧导航（side_nav）和'数据'div（app_forms）区域，其中侧导航的固定宽度为124px，剩余的身体区域以％定义。

我有2个问题

根据'app_forms'div高度，侧导航高度不会增加
'apps_forms'div在浏览器调整大小时崩溃

有人可以帮助我吗，我已经摆弄了这个。

http://jsfiddle.net/y42F9/

<div class="app_body">

   <div class="side_nav">
        <ul>
         <li ><a href="#" >Environments</a></li>
         <li class="events"><a href="#">Events</a></li>
         <li class="admin"><a href="#">Admin</a></li>
         <li class="help"><a href="#">Help</a></li>
       </ul>
  </div>

 <div class="app_forms">
     <div class="datagrid">datagrid area</div>
     <div class="info" >record info</div>  
 </div>

</div>

Answer 1

在这里查看我的解决方案：http://jsfiddle.net/MdT6d/（随意调整浏览器窗口大小）

HTML：

<div class="app_body">
    <div class="side_nav">
        <div>one</div>
        <div>two</div>
        <!-- as much content here as you want -->
    </div>
    <div class="app_forms">
        blah blah <!-- as much content here as you want -->     
    </div>
</div>
<div class="footer">footer</div>

的CSS：

.app_body {
    width:100%;
    background-color: yellow;
}
.side_nav {
    width:122px;
    float:left;
    background-color: blue;

}
.app_forms {
    background-color: grey;
    margin-left: 122px;
}

.footer {
    height:38px;
    clear:both;
    background-color: red;
}

我删除了你添加的与问题没有直接关系的div。诀窍就是给app_body一个相当于side_nav宽度的左边距..

基本上siden nav的高度将是相同的，无论你添加到app_body的内容有多少..但是你可以让它看起来好像side_nav的高度与app_body的高度一起扩展..你只需给它一个背景颜色（或必要时沿y轴重复的背景图像）..

如果你向side_nav添加更多内容，那么它也会自然增长..如果它增长了app_body的高度..你可以用app_body做同样的技巧..基本上用包装器包装side_nav和app_body div并给它与app_body相同的bacgkround颜色（如果需要），使它看起来好像它的高度也随着side_nav一起增长

固定宽度和宽度流体布局中div的动态高度

1 个答案: