div自适应布局

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OnlineShowPage.aspx.cs"
Inherits="RM.Web.OnlineCheck.OnlineShowPage" %>

<!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 runat="server">
<title></title>
<style type="text/css">
html, body
{
margin: 0;
height: 100%;
}
#containt
{
height: 100%;
}
form
{
height: 100%;
}

#containt div
{
float: left;
height: -moz-calc(100% - 0px));
height: -webkit-calc(100% - 00px);
height: calc(100% - 0px);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="containt">
<div style="width: 20%; background-color: Red;">
</div>
<div style="width: 80%; background-color: Blue;">
</div>
</div>
</form>
</body>
</html>

时间: 2024-11-07 16:42:40

div自适应布局的相关文章

DIV+CSS自适应布局

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

独行DIV自适应宽度布局CSS实例与扩大应用范围

DIVCSS5先给大家介绍独立一列自适应宽度,也就是单独一行宽度自适应DIV的布局.通过DIV CSS实例CSS自适应宽度布局方法,再过常见用处介绍充分掌握自适应独占一行一列的布局技巧. 关键点:自适应,这个时候就不能使用固定的CSS宽度值,这个时候就只能使用百分比的宽度表达宽度. 关键代码:width:?% 以百分比为单位的百分比值,自然对象会根据设置百分比自动计算该对象宽度. 实例CSS代码: .box{ width:60%; height:80px; border:1px solid #F

1.解决自适应布局中div内部img距离底部4px的空白问题?2. img怎么实现水平垂直居中?

1.解决自适应布局中div内部img距离底部4px的空白问题? 示例代码: <style> .t1{自适应布局,外层盒子不给宽高(由内部元素撑开) } img{ /* vertical-align:bottom; */     1.设置img vertical-align:bottom /* display:block; */ 2.img 变成块级元素 display:block;  变成块级元素就无法在父元素设置可继承的text-align:center等了,而是使用 margin:xx a

三列自适应布局

自适应布局(四种写法,三种方案) 1.使用position:absolute. <!doctype html> <html> <head> <style> body{ width: 100%; padding: 0; margin: 0; } div{ height: 500px; } .div1{ width: 100px; background: red; float: left; } .div2{ height: 500px; background:

微信小程序新单位rpx与自适应布局

rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信还捣鼓出新的rpx单位?在解释这个单位前,我们先简单了解一下目前的主流的自适应布局解决方案: 响应式(Responsive web design) rem 流式布局 scale伸缩布局 响应式 响应式布局的问题在于需要维护多个样式文件,维护成本太大,一般的移动H5页面都不会优先考虑. rem rem是近几年比较流行的方案,淘宝移动web端就是

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

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

抛砖引玉之宽度自适应布局

抛砖引玉之宽度自适应布局 什么是宽度自适应布局呢? 就是当浏览器窗口大小改变时,浏览器里的元素宽度也随之改变,从而达到自适应布局. 常见的宽度自适应布局有: 1.  两列:左边宽度不变,右边宽度自适应 2.  三列:左右两边宽度不变,中间部分自适应 3.  三列:左右两边宽度自适应,中间部分不变 一.利用div+css实现以上“自适应布局” (1)两列:左边宽度固定,右边宽度自适应 利用div+float+margin,已在随笔‘float剖析’中讲解,具体代码和效果图见下: <!DOCTYPE

div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)

站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条"捷径". 希望广大网友提出宝贵意见 同时不希望将初学的您 带入走火入魔的状态! 1 :css (cascading style sheet): 初学者可以下载一本css 2.0 手册 大概48小时的时间可以看完 试完.至于样式手册上的单词(属性和取值) 多久能背完取决你的努力和英语基础,请注意 无论

两列右侧自适应布局

<div class="g-bd1 f-cb"> <div class="g-sd1"> <p>左侧定宽</p> </div> <div class="g-mn1"> <div class="g-mn1c"> <p>右侧自适应</p> </div> </div> </div> /* 两