css自适应

//宽度

<div style="border:1px solid red">
  <div style="float: left;background:#00f;width:100px;_margin-right:-3px">ggds</div>
  <div style="float: right;background:red;width:100px;_margin-left:-3px">ggds</div>
  <div style="margin:0 100px;background:#0f0">ggds</div>
</div>

//高度

<div style="height:70px">ggds</div>
<div style="border:1px solid red;position:absolute;top:70px;bottom:0;width:100%"></div>

//IE6

html{padding-top:70px}
<div style="background:red;position:absolute;top:0;width:100%;height:70px">ggds</div>
<div style="border:1px solid red;height:100%"></div>

//最终

html,body{ height:100%;}

body,div{ margin:0; padding:0; color:#F00;}

* html{ padding-top:100px;}/*for ie6*/

.top{ background:#36C; height:100px;}

* html .top{ background:#36C; height:100px; position:absolute; top:0; width:100%;}/*for ie6*/

.main{ background:#F90; position:absolute; width:100%; top:100px; bottom:0; overflow:auto;}

* html .main{ background:#F90; position:static; height:100%;}/*for ie6*/

<div class="top">ggds</div>
<div class="main"></div>

//等高布局

.contain{
  margin:0 auto;
  width:600px;
  border:3px solid #00C;
  overflow:hidden; /*这个超出隐藏的声明在IE6里不写也是可以的*/
}
.left{
  float:left;
  width:144px;
  background:#B0B0B0;
  padding-bottom:2000px;
  margin-bottom:-2000px;
}
.right{
  float:left;
  width:450px;
  background:#6CC;
  padding-bottom:2000px;
  margin-bottom:-2000px;
}

<div class="contain">
  <div class="left">我是left</div>
  <div class="right">我是right<br><br><br>现在我的高度比left高,但left用它的padding-bottom补偿了这部分高度</div>
  <div style="clear:both"></div>
</div>

相关文章:http://www.cnblogs.com/2050/archive/2012/07/30/2614852.html

    http://www.cnblogs.com/2050/archive/2012/07/30/2615260.html

    http://www.cnblogs.com/2050/archive/2012/07/31/2616460.html

时间: 2024-10-10 23:05:52

css自适应的相关文章

CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下网站源码方法: 一: 右侧固定宽度 左侧自适应  第一种方法:左侧用margin-right,右侧float:right  就可以实现.     HTML代码可以如下写:    <div class="box-left">        <a href="" targ

CSS自适应网页(CSS第一篇)

?CSS的属性: 用浏览器自带的审查元素对一些页面进行调整,快捷键是F12. 网页允许宽度自适应: 在代码的头部加入一行viewport元标签. <meta name="viewport" content="width=device-width,initial-scale=1"/> 所有主流浏览器都支持这个设置,包括IE9.对于那些老式浏览器(主要是IE6.7.8),需要使用css3-mediaqueries.js. 网页自动适应屏幕宽度的CSS代码:

实用的css自适应宽度圆角按钮图标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

【前端】css自适应宽度滑动门菜单

html     css    width  自适应 什么是CSS自适应宽度滑动门菜单? CSS自适应宽度菜单指菜单的宽度可以随着内容的增加而变宽,就拿下边的实例来说,是按4个字的宽度来设计的,如果其中一项为5个字或更多,就放不下了.那么我们就需要让它的宽度可以随着内容的增减而变化,这就是css自适应宽度菜单.         自适应宽度按钮的效果是怎样的呢? 那么,自适应宽度按钮,是怎么实现的呢? 要想实现自适应宽度,需要在文字上增加一个辅助标签,如span,分别在a上和span上设置背景,一

图片的css自适应

当需要css来缩放图片的时候,可以采用外层容器100%或者任意百分比, 内层图片img tag 没有宽高,用sass写经过断点后的mixin中的样式就是这样: .workscon_section{ width: 100%; .left_art{ width: 100%; display: block; float: left; text-align: center; img{ border: 0 none; height: auto; max-width: 92%; margin: 1px 0;

css自适应高度下垂直居中文字

****  首先讲讲ionic下的样式设置,ionic下是按功能将样式作用域划分成模块,模块内元素对应父模块的样式,而再是全局body...继承了  **** 1.关于css自适应高度下垂直居中文字,非定位类(position会影响性能,能优则优)的方法实现 : 分析:使用vertical-align方法可以使元素垂直居中,但是只是针对支持vertical的元素,如table .td 等,div和span是不支持的,所以要模拟table元素. --->   父元素设置display : tabl

css 纯css自适应页面 示例

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>纯CSS自适应响应式Table数据表格DEMO演示</title> 6 7 <style> 8 *{ 9 box-sizing: border-box; 10 -webkit-box-sizing: border-box; 11 -moz-box-sizing: b

CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)

1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime;} #right { float: right; width: 200px; background: lime;} #center { margin:0 200px; background: blue} html: <div id="left">left</div>

css教程:css自适应布局方法

在进行web前端项目开发(http://www.maiziedu.com/course/web-px/)时,通常情况下会对浏览器进行自适应布局,自适应布局分两类:高度和宽度,方法有很多,我用三列布局举例,我就列几个通俗易懂的例子呗,懂了三列的,两列的原理一样,呵呵哒. 效果图如下:高度自适应--宽度自适应 1,高度自适应布局 原理就是把每个模块设置为绝对定位,然后设置中间自适应的模块的top和bottom属性的值分别为头部模块和底部模块的高,然后中间模块的高度就自适应了.代码如下: html代码

DIV+CSS自适应布局

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