More than code
Welcome to the website

CSS解决高度自适应问题(div高度自适应)

需求:

1. 这个矩形的高度和浏览器窗口的高度相同,不能出现纵向滚动条

2. 绿色部分高度固定,比如50px

3. 紫色部分填充剩余的高度

HTML结构如下:

<div id="main">
    <div id="nav">nav</div>
    <div id="content">content</div>
</div>

需求1:


html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#main {
    background-color: #999;
    height: 100%;
}

需求2:

#nav {
    background-color: #85d989;
    height: 50px;
}

需求3 :

需求3是最让人头痛的,一般我们都会想到height:100%, 但是100%是以父元素的高度为准的,比如父元素的高度是300px,#nav占去了50px,#content理应是250px,但是写成height: 100%,结果就是#content的高度也变成了300px,出现了需求不允许的纵向滚动条。

解决方式如下:

#nav {
    background-color: #85d989;
    width: 100%;
    height: 50px;
}
#content {
    background-color: #cc85d9;
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0px;
    left: 0px;
}

重点是要top和bottom一起使用,这是很反常规的用法,查阅文章终于找到了答案!

赞(0) 打赏
未经允许不得转载:李帅帅空间 » CSS解决高度自适应问题(div高度自适应)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏