0

我正在为一个应用程序开发流体布局，在该应用程序中，我希望根据父 div 的内容获得 div 的固定宽度和动态高度。基本上，我有一个侧面导航（side_nav）和“数据”div（app_forms）区域，其中侧面导航的固定宽度为 124px，剩余的正文区域以 % 定义。

我有 2 个问题

  1. 侧导航高度不会根据“app_forms”div 高度增加

  2. 当浏览器调整大小时，'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>
4

1 回答 1

3

在这里查看我的解决方案：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 宽度相等的左边距。

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

另外，如果您向 side_nav 添加更多内容，那么它也会自然增长.. 如果它增加了 app_body 的高度.. 您可以对 app_body 执行相同的技巧.. 基本上用包装器 div 包装 side_nav 和 app_body 并给出它与 app_body 相同的背景颜色（如有必要），使其看起来好像它的高度也随着 side_nav 增长

于 2013-02-11T10:37:22.803 回答