当前位置：文江博客话题详情

JavaScript CSS HTML CSS3 Flex

flex布局有一个自适应高度的div，里面有两个div，一个高度为100px，希望另一个填满剩下的高度

发布于 2022-09-06 11:10:19 字数 1537 浏览 8 评论 0

我需要一个这样的布局

于是我使用了flex布局

但是我的自适应高度没有效果

html

 <div class="container">
    <div class="header" style="background-color:#333;">Header</div>
    <div class="div-box">
      <div class="aside"  style="background-color:#666;">Aside</div>
      <div class="content" style="background-color:#999;">Main</div>
    </div>
  </div>

css

<style scoped lang="scss" type="text/scss">
  .container{
    color: #fff;
    display: flex;
    flex-direction:column;
    .header{
      height: 60px;
    }
    .div-box{
      flex: 1;
      display: flex;
      .aside{
        width: 200px;
      }
      .content{
        flex: 1;
      }
    }
  }
</style>

我的div-box里面的左侧固定宽度，右侧自适应宽度是有效的。但是自适应高度的不行

不知道为什么

目前我的页面是这样子

=======================================
可以了
我好像是没有设置container的高度

把样式改成

<style scoped lang="scss" type="text/scss">
  #layout{
    height: 100%;
  }
  .container{
    color: #fff;
    display: flex;
    flex-direction:column;
    height: 100%;
    .header{
      height: 60px;
    }
    .div-box{
      flex: 1;
      height: 100%;
      display: flex;
      .aside{
        width: 200px;
      }
      .content{
        flex: 1;
      }
    }
  }
</style>

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

素衣风尘叹 2022-09-13 11:10:19

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title>
<style> 
#main
{
    width:220px;
    height:300px;
    border:1px solid black;
    display:flex;
}

#main div
{
    flex:1;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">红色</div>
  <div style="background-color:lightblue;">蓝色</div>  
  <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>

<p><b>注意:</b> Internet Explorer 9 及更早版本不支持 flex 属性。</p>
<p><b>注意:</b> Internet Explorer 10 通过 -ms-flex 属性来支持。 IE11 及更新版本完全支持 flex 属性 (不需要 -ms- 前缀)。</p>
<p><b>注意:</b> Safari 6.1 (及更新浏览器) 通过 -webkit-flex 属性支持。</p>

</body>
</html>

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

游缘惊梦

文章 0 评论 0

小兔几

文章 0 评论 0

Glik

文章 0 评论 0

生生漫

文章 0 评论 0

Luxian

文章 0 评论 0

Champion-Ming

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文