如何创建适配可折叠面板的动态宽高浮动div容器？

直接用Flex布局就能完美解决你遇到的两个问题，比float布局更适配这种侧边栏+内容的场景。以下是修改后的完整代码：

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex_container">
  <div class="expandable_pane collapsed" id="expandable_pane">
    Menu Icons/Links would go here.
  </div>
  <div class="content_container">
    <div class="content_pane">
      Information for page here.
    </div>
  </div>
</div>

CSS #

.expandable_pane{
  box-shadow: 1px 1px 10px 1px rgb(98,98,98);
  overflow: hidden;
  white-space: nowrap;
  padding: 2px;
  transition: width .5s;
}

.expandable_pane.collapsed {
  width: 10px;
}

.expandable_pane.extended {
  width: 500px;
}

.flex_container {
  height: 300px;
  display: flex; /* 核心：开启Flex布局 */
}

.content_container{
  padding-left: 10px;
  flex: 1; /* 核心：占据父容器剩余所有空间 */
  height: 100%;
}

.content_pane {
  padding: 10px;
  box-shadow: 1px 1px 10px 1px rgb(98,98,98);
  height: 100%;
}

JavaScript #

$(document).ready(function(){
    $("#expandable_pane").click(function(){
        $(this).toggleClass("collapsed extended");
    })
})

关键修改说明： #

• Flex布局启用：给.flex_container添加display: flex，让子元素自动横向排列，同时子元素默认会拉伸高度至父容器高度，解决了侧边栏高度没占满的问题。
• 内容容器自适应：.content_container去掉float: left，添加flex: 1，这个属性会让它自动占据父容器中除侧边栏外的所有剩余宽度，侧边栏折叠/展开时会自动缩放，不会出现超出屏幕或被挤到下方的情况。
• 简化JS逻辑：用toggleClass直接切换两个类，比字符串替换更简洁且不易出错。

内容的提问来源于stack exchange，提问作者Darren Woodson