如下图, 头部及左侧使用固定定位, 然后想让中间部分高度铺满中间部分,如何使用css实现

html 固定定位加高度自适应

super_Maria

326123750

发布于
2016-12-29

如下图, 头部及左侧使用固定定位, 然后想让中间部分高度铺满中间部分,如何使用css实现

图片描述

html css

阅读 6.8k

5 个回答

<html>

<head>
  <title>
  </title>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    body {
      display: flex;
      flex-direction: column;
    }
    
    header {
      height: 60px;
      border: solid 2px yellow;
    }
    
    main {
      flex: 1;
      display: flex;
    }
    aside{
      width: 120px;
      border:solid 2px red;
    }
    #main-page{
      flex:1;
      border:solid 2px #000;
    }
  </style>
</head>

<body>
  <header>
  </header>
  <main>
    <aside>
    </aside>
    <div id="main-page">
    </div>
  </main>
</body>

</html>
效果图

michael_cai

10.6k2840

发布于
2016-12-29

给一定的padding-top和padding-left。

orange

4.5k1614

发布于
2016-12-29

html, body {
    height: 100%;
}

.main {
    width:100%;
    height:100%;
    margin: 60px 0 0 120px;
}

肖小波

45713

发布于
2016-12-30

更新于
2016-12-30

我的结构大概是这样

<div></div>
<div>
    <article>
    </article>
    <aside>
    </aside>
</div>

首先清除浏览器默认样式解决滚动条问题，然后将article左浮动提前占位，设置一个margin-left为aside的宽度，然后正常写aside。
然后发现要单独设置aside和article的高度，基本无法用内容撑开。。。。。。

隔壁老朱

发布于
2018-11-27

新手上路，请多包涵

width:calc(100% - 固定定位的宽度),高度一样

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

html 固定定位加高度自适应

你尚未登录，登录后可以

css布局怎么保证右边一直在可视范围内？

图片沿着圆环的转动有什么方法吗？

CSS如何巧妙实现标题居中、关闭按钮居右效果？

js阻止冒泡问题？

Scss的rgba()方法无法对变量进行二次编译？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？