css经典布局——头尾固定高度中间高度自适应布局

转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的同学可以百度.google.这里我不得不吐下槽!! 百度实在让我这个“粉丝”失望.就目前情况来说,百度已经完全轮为“有钱人排行榜”!再也不顾及用户的搜索需求了,因为主导地位实在是:不可撼动! 不相信的同学,可以亲身对比下B vs G的搜索结果.别告诉我google如何强大!! 很久以前,百度的搜索结…

典型的DIV CSS三行二列居中高度自适应布局

如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) 首先先按这里看实际运行效果,这个页面在mozilla.opera和IE浏览器中均可以实现居中和高度自适应.我们来分析代码: CSS: body{background:#999;text-align:center;color: #333;font-family:arial,verdana,sans-…

你不知道的css各类布局（三）之自适应布局

自适应布局概念自适应布局(Adaptive Layout)是对凡是有自适应特性的一类布局的统称自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小.自适应布局和静态布局类似也是采用绝对长度单位(px.pt.mm.cm.in),但不同点在于它通过media query为页面指定了多个固定宽度. 布局特点自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围. 改变屏幕分辨率可以切换不同的静态局部(页面元素…

让tableView的高度等于contentSize的高度、动态调整tableView的高度、tableView的高度自适应布局

文章概要: 1.简介下,tableView中的内容如何高度自适应的布局 2.如何做到让tableView的高度动态调整还是看图作文吧- 首先,tableView的高度就是用户能够看见里面更大世界的那个窗口的大小,一般是固定的. 然后在cell里面布局的时候,像图中粉红色的view展示的内容需要全部展示出来,这样的话这个粉红view的高度就需要是动态变化的.比如一个UILabel,因为它是属于有内置大小的控件(自身的size通过其内部的内容所决定可以自身计算出来的控件),你只需要设置这个labe…

css--常见左右盒子高度自适应布局

前言前端开发工程师最基础的技能要求是根据 ui 设计稿还原网页,这就缺少不了必要的网页布局,首先看下最近小伙伴问我的一个问题,他说一个网页有左右两个部分,左右两个部分的高度都不固定,要使得右部分的宽度充满剩余的部分,并且高度随着左边的高度发生自适应,而左侧的高度随着内容的高度发生变化,对于这么一个简单的网页布局,对于一个入行不久的小白来说遇到这样的问题肯定束手无策,本文就来整理一下我实现这种布局的集中方案. 正文分析上面的需求,很快构建出基础的布局方案,具体效果如下:下面是总结的几种实现方案…

响应式布局（Responsive Layout）/流式布局（Fluid Layout）/自适应布局（Adaptive）

1.使用媒体查询来适应不同视口的固定宽度设计,例如bootstrap的container类. 2.将固定像素布局转换成灵活的百分比布局,才能让页面元素根据视口大小在一个又一个媒体查询间伸缩修正样式. 3.目标元素宽度 / 上下文元素宽度 = 百分比宽度 4.响应式的文字,使用百分比和em,em的实际大小是相对于其上下文的字体大小而言的,目标元素尺寸 / 上下文元素尺寸 = 百分比尺寸 font-size:100%; font-size:16px; font-size:1em; 5.弹性图片,去掉…

css布局之头尾固定中间高度自适应

被这个问题困扰了很久.大神别鄙视我,我是搞后台开发的....试过了很多方法,比如设定高度100%.同事用的js计算高度,我对js设置的方式一直觉得不够好,尽管设置高度为100%的方式更差,直到发现了一个博客https://www.cnblogs.com/pigtail/archive/2012/11/25/2787508.html,这篇博客讲的很详细,我不再赘言,之前没能解决的原因现在想来是百度的问题,百度检索的结果是越来越差了,以后尽量不用百度了.就算英文阅读起来费一点劲,也要坚持. 我的理解…

CSS百分比padding实现比例固定图片自适应布局

一.CSS百分比padding都是相对宽度计算的在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比值不一样. 这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说明,这里不展开. 对于padding属性而言,任意方向的百分比padding都现对于宽度计算可以让我们轻松实现固定比例的块级容器,举个例子,假设现在有个<div>元素: div { padding: 50%; } 或者: di…

css布局之左侧固定右侧自适应布局

参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div style="float:left; width:490px; border-right:5px #333 solid; height:100%;"> <table class="form"> @Html.HiddenFor(m => m.Notif…

css之页面三列布局之左右上下高度固定，中间自适应

第一种,绝对定位 !DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>头尾固定中间高度自适应布局</title> <style> html, body { height:%; margin:; padding: } #dHead { height:100px; line-height:100px; background:#; width:%;…

CSS布局之-高度自适应

何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容.高度自适应不像宽度自适应那样简单,在兼容浏览器方面也稍微复杂一些. 布局思路在IE7+及chrome.firefox等浏览器中,高度自适应可以利用绝对定位来解决.但一个元素是绝对定位时,如果没有给它设定高度或宽度,则它的的高度和宽度是由它的top.right.bottom.left属性决定的,但这一法则在IE6中并不适用,因此在IE…

[css] 自适应布局移动端自适应

一.宽度自适应三列布局左右固定.中间不固定或者两列布局,左边固定右边不固定原文链接:http://www.cnblogs.com/2050/archive/2012/07/30/2614852.html 看下代码结构: 效果为: 中间列要不要设置margin-left和margin-right ? 注意,中间那列需要把左右两个外边距分别设为左右两列的宽度,否则会有些问题.如下: 在谷歌.火狐等标准浏览器下是这样的(包括IE8+): 而在IE6.IE7中是这样的(图是在IE6下截的) 我们可以…

DIV+CSS自适应布局

自适应布局分两类:高度和宽度,方法有很多,我用三列布局举例,我就列几个通俗易懂的例子呗,懂了三列的,两列的原理一样,呵呵哒. 效果图如下:高度自适应——宽度自适应 1,高度自适应布局原理就是把每个模块设置为绝对定位,然后设置中间自适应的模块的top和bottom属性的值分别为头部模块和底部模块的高,然后中间模块的高度就自适应了.代码如下: html代码: <body> <div class="top"> 120px </div>…

【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4588 一.开篇之言要说web上实现两栏自适应布局的方法,一双手都数不过来.不知大家有没有细想过,为什么这些方法可以实现自适应布局呢? 本文就将深入探讨下流体特性和BFC特性下的两栏自适应布局,还是…

记一次产品需求：图片等比缩放和CSS自适应布局16:9

前言前阵子,产品跑过来问我现有的模板中没有图片模板,需要添加一个图片模板:然而,他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放,并且居中展示图片.我当时想着,抛开技术实现层面,图片展示也理应是这样的,更加友好.当时我就说应该没啥大问题,于是就有了下文(PS:萌新还没技术积累,只能是凭着一点积累和现查来调研). 1. 图片等比缩放网上搜了一下图片等比缩放,有介绍使用: width: auto; height: auto; max-width: 100%; max-heig…

【CSS】三栏/两栏宽高自适应布局大全

页面布局注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案方案一: float (左右浮动,中间不用给宽,设置margin左右留出位置) html部分,center放到后面 <section class="wrapper"> <div class="left">left</div> <div class="right"…

css 两列自适应布局的4种思路

前面的话前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和grid来介绍两列自适应布局的4种思路 float [思路一]float 在单列定宽单列自适应的两列布局中,经常用float和负margin配合实现布局效果.但由于margin取值只能是固定值,所以在两列都是自适应的布局中就不再适用.而float和overflow配合可实现两列自适应效果.使用overfl…

css3 calc()属性介绍以及自适应布局使用方法

前端知识 Calc()介绍 calc的英文是calculate的缩写,中文为计算的意思,是css3的一个新增的功能,用来只当元素的长度.比如说:你可以用calc()给元素margin.padding.border.font-size和width等属性设置动态值.为什么说是动态值呢?因为我们是使用来表示得到的值.不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度. Calc()的用处 calc()能让你给元素的做计算,你可以给一个div元素,使用百分比.em.px…

移动端利用rem实现自适应布局

好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这个样式有时候并没有那个完美就放弃那个效果了.到后来 ,发现这是一个很不好的习惯,一直想着小毛病不去解决,想着以后总归是会的.结果在实际开发的时候,发现这个太影响工作效率了.的确,很多小问题百度都能解决,只是,小毛病一多你就会发现你写一个项目的时候一直都在百度... 今天,就来讲讲之前遗留下来的一个问…

css实现左栏固定右栏自适应，高度自适应的布局

收集css中的基础知识,所以这并不是什么新鲜的技术,只是作为备忘~本文的内容如题所示,是一个简单的布局,用于左右两栏布局的页面,左侧是固定宽度,右侧占据剩余的宽度.在垂直方向,始终以高度最大的一栏为基准,例如,随着右侧面板中动态添加内容高度增加,左侧也跟着增加,这样不会产生的难看的像这样的情况: 实现该布局的代码如下: <style type="text/css"> #content{ border:5px solid blue; overflow: hidden; } #…

常用样式制作思路自定义按钮~自适应布局~常见bug seajs简记初学者必知的HTML规范不容忽略的——CSS规范

常用样式制作思路学习常用样式总结参考来自这里带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>图文列表</title> 6 <style type="text/css"> 7 li{list-style-ty…

这可能是史上最全的CSS自适应布局总结教程

标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关的盒子模型,普通流.浮动.绝对定位三种定位机制,CSS3中的transform.弹性盒子模块.试验中的grid模块.逛园子的时候经常可以看到浮动布局,inline-block布局,弹性盒布局这几个名词.现在对布局也算有一点了解,做个总结巩固一下.如果你也看了很多资料,但是实际动手时对布局还是无从下手…