css布局之头尾固定中间高度自适应
被这个问题困扰了很久。大神别鄙视我,我是搞后台开发的。。。。试过了很多方法,比如设定高度100%、同事用的js计算高度,我对js设置的方式一直觉得不够好,尽管设置高度为100%的方式更差,直到发现了一个博客https://www.cnblogs.com/pigtail/archive/2012/11/25/2787508.html,这篇博客讲的很详细,我不再赘言,之前没能解决的原因现在想来是百度的问题,百度检索的结果是越来越差了,以后尽量不用百度了。就算英文阅读起来费一点劲,也要坚持。
我的理解是:在不考虑IE6时,可以很方便的设置,关键点在于position设置为absolute,然后定义bottom和top属性即可。中间的部分设置一个overflow:auto。就大功告成了。
css布局之头尾固定中间高度自适应的更多相关文章
- css布局------左右宽度固定,中间宽度自适应容器
HTML /*适用方法1,方法2*/<body> <div class="container"> <div class="left" ...
- css经典布局——头尾固定高度中间高度自适应布局
转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...
- CSS 实现:两栏布局(一边固定,一边自适应)
☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <d ...
- css 关于两栏布局,左边固定,右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
- css布局--两列布局,左侧固定,右侧自适应(其中左侧要可以拖动,右侧水平滚动条)
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
- css布局:左边固定宽度,右边自适应宽度或右侧固定,左侧自适应三种方法
方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...
- 如何用CSS实现左侧宽度固定,右侧自适应(两栏布局)?左右固定中间自适应(三栏布局)呢?
在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...
- css实现左栏固定右栏自适应,高度自适应的布局
收集css中的基础知识,所以这并不是什么新鲜的技术,只是作为备忘~本文的内容如题所示,是一个简单的布局,用于左右两栏布局的页面,左侧是固定宽度,右侧占据剩余的宽度.在垂直方向,始终以高度最大的一栏为基 ...
- css布局------上下高度固定,中间高度自适应容器
HTML <body> <div class="container"> <div class="header"></d ...
随机推荐
- 第五次Scrum冲刺
第五次Scrum冲刺 1.成员今日完成情况 队员 今日完成任务 刘佳 前端初步构建 李佳 后端设计初级阶段 周世元 数据设计 杨小妮 博客编写 许燕婷 管理团队当日及次日任务 陈水莲 测试矩阵用例设计 ...
- 单例模式 demo
// 用单例模式实现自定义颜色类 public class MyColor { private static MyColor _redColor = null; public static MyCol ...
- Hadoop集群(四) Hadoop升级
Hadoop前面安装的集群是2.6版本,现在升级到2.7版本. 注意,这个集群上有运行Hbase,所以,升级前后,需要启停Hbase. 更多安装步骤,请参考: Hadoop集群(一) Zookeepe ...
- mui-顶部选项卡-第一个选项卡内容不显示
<div id="item1" class="mui-control-content mui-active"> <div id="s ...
- Node KeyNote
[Node KeyNote] 1.实际上,.node文件在windows下它是一个.dll文件,在*nix下则是一个.so文件. 2.默认变量 function(exports, require, m ...
- HTML5 WebSocket 权威指南 学习一 (第二章 WebSocket API)
WebSocket 协议两种URL方案 ws 客户端和服务器之间的非加密流量 wss 客户端和服务器之间的加密流量 WebSocket Secure 表示使用传输层安全性(SSL)的WebSocket ...
- oracle 调试数据库
转载:https://www.cnblogs.com/liuqiyun/p/6589814.html 工具/原料 PL\SQL Oracle 方法/步骤 首先在PL/SQL的左侧资源栏中展 ...
- while 解决 10000米绳子 对折当 绳长小于5米时求绳的对折次数
public static void main(String args[]){ double length = 10000; int day = 0; while(day > 5){ lengt ...
- POJ-3984.迷宫问题(BFS + 路径输出)
昨天中午做的这道题,结果蛙了一整天,就因为一行代码困住了,今天算是见识到自己有多菜了.流泪.jpg 本题大意:给一个5 * 5的迷宫,1表示墙壁,0表示通路,从左上角走到右下角并输出路径. 本题思路: ...
- CyclicBarrier簡介
package CyclicBarrier; import java.util.concurrent.CyclicBarrier;import java.util.concurrent.atomic. ...