css解决高度自适应问题_css固定高度,一个自适应-程序员宅基地

技术标签： css

转自：https://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html

css解决高度自适应问题

高度自适应问题，我很抵触用js去解决，因为不好维护，也不够自然，但是纯用CSS，难度不小，比如下面我要说的例子。

在这里插入图片描述

需求：

这个矩形的高度和浏览器窗口的高度相同，不能出现纵向滚动条；
绿色部分高度固定，比如50px；
紫色部分填充剩余的高度；

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

当然，用js解决这种问题是相当简单的，但是这次我就是不想用js，下面就来试吧：

这个需求真的让我非常崩溃，看似简单，换了n种方式都觉得不靠谱，最后找到一种最接近理想效果的方法，如下

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#main {
    background-color: #999;
    height: 100%;
} 
#nav {
    background-color: #85d989;
    width: 100%;
    height: 50px;
    float: left;
}
#content {
    background-color: #cc85d9;
    height:100%;
}

这里利用了浮动，最后的结果仅仅是看着没问题，当然了，如果你只是简单的展示文本和图片，这种方法已经够用了，但是如果你想用js做点交互，比如#content内部有个需要拖拽的元素，它的top最小值肯定不能是0，否则就被#nav挡住了，悲剧的是我就有这种需求，于是继续苦逼的试。

经过一天的尝试，加上高人指点，终于有解了，泪奔啊

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

重点是要top和bottom一起使用，这是很反常规的用法，可以强制定义盒模型的区域，神奇啊

本文链接：https://blog.csdn.net/wenxiukeke/article/details/87103676

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

linux devkmem 源码,linux dev/mem dev/kmem实现访问物理/虚拟内存-程序员宅基地

文章浏览阅读451次。dev/mem: 物理内存的全镜像。可以用来访问物理内存。/dev/kmem: kernel看到的虚拟内存的全镜像。可以用来访问kernel的内容。调试嵌入式Linux内核时，可能需要查看某个内核变量的值。/dev/kmem正好提供了访问内核虚拟内存的途径。现在的内核大都默认禁用了/dev/kmem，打开的方法是在 make menuconfig中选中 device drivers --> ..._dev/mem 源码实现

vxe-table 小众但功能齐全的vue表格组件-程序员宅基地

文章浏览阅读7.1k次，点赞2次，收藏19次。vxe-table，一个小众但功能齐全并支持excel操作的vue表格组件_vxe-table

（开发）bable - es6转码-程序员宅基地

文章浏览阅读62次。参考：http://www.ruanyifeng.com/blog/2016/01/babel.htmlBabelBabel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行// 转码前input.map(item => item + 1);// 转码后input.map(function (item) { return item..._让开发环境支持bable

FPGA 视频处理 FIFO 的典型应用_fpga 频分复用视频-程序员宅基地

文章浏览阅读2.8k次，点赞6次，收藏29次。摘要：FPGA视频处理FIFO的典型应用，视频输入FIFO的作用，视频输出FIFO的作用，视频数据跨时钟域FIFO，视频缩放FIFO的作用_fpga 频分复用视频

R语言：设置工作路径为当前文件存储路径_r语言设置工作目录到目标文件夹-程序员宅基地

文章浏览阅读575次。【代码】R语言：设置工作路径为当前文件存储路径。_r语言设置工作目录到目标文件夹

background 线性渐变-程序员宅基地

文章浏览阅读452次。格式：background: linear-gradient(direction, color-stop1, color-stop2, ...);<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner>] ,]? &l..._background线性渐变

随便推点

【蓝桥杯省赛真题39】python输出最大的数中小学青少年组蓝桥杯比赛算法思维python编程省赛真题解析-程序员宅基地

文章浏览阅读1k次，点赞26次，收藏8次。第十三届蓝桥杯青少年组python编程省赛真题一、题目要求（注：input（）输入函数的括号中不允许添加任何信息）1、编程实现给定一个正整数N，输出正整数N中各数位最大的那个数字。例如:N=132，则输出3。2、输入输出输入描述：只有一行，输入一个正整数N输出描述：只有一行，输出正整数N中各数位最大的那个数字输入样例：

网络协议的三要素-程序员宅基地

文章浏览阅读2.2k次。一个网络协议主要由以下三个要素组成：1.语法数据与控制信息的结构或格式，包括数据的组织方式、编码方式、信号电平的表示方式等。2.语义即需要发出何种控制信息，完成何种动作，以及做出何种应答，以实现数据交换的协调和差错处理。3.时序即事件实现顺序的详细说明，以实现速率匹配和排序。不完整理解：语法表示长什么样，语义表示能干什么，时序表示排序。转载于:https://blog.51cto.com/98..._网络协议三要素csdn

The Log: What every software engineer should know about real-time data's unifying abstraction-程序员宅基地

文章浏览阅读153次。主要的思想，将所有的系统都可以看作两部分，真正的数据log系统和各种各样的query engine所有的一致性由log系统来保证，其他各种query engine不需要考虑一致性，安全性，只需要不停的从log系统来同步数据，如果数据丢失或crash可以从log系统replay来恢复可以看出kafka系统在linkedin中的重要地位，不光是d..._the log: what every software engineer should know about real-time data's uni