<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>测试box-sizing</title>

<style>

    html, body, div {

        margin: 0;

        padding: 0;

    }

    #main {

        width: 100%;

        overflow: hidden;

    }

    #left {

        float: left;

        width: 10%;

        margin-bottom: -1000px;

        padding-bottom: 1000px;

        background: red;

    }

    #right {

        float: left;

        margin-bottom: -1000px;

        padding-bottom: 1000px;

        background: yellow;

    }

</style>

</head>

<body>

    <div id="main">

        <div id="left">

        dddddddddddddddddds</br>

        ssssssssssssss</br>

        ssssssssssssssss

        </div>

        <div id="right">ddddddddddsssssssssssssddddddddddsssssssssssssddddddddddsssssssssssssddddddddddsssssssssssss</div>

    </div>

</body>

</html>

css 等高布局的更多相关文章

  1. CSS等高布局的6种方式

    × 目录 [1]边框模拟 [2]负margin [3]table[4]absolute[5]flex[6]js 前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等 ...

  2. CSS等高布局的7种方式

    前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高.本文将介绍边框模拟.负margin这两种伪等高以及tabl ...

  3. CSS等高布局

    做一些后台项目,和一下带侧边栏项目的时候登高布局很常用,总结了下有几种 1.margin-bottom方法 这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法.核心的CSS代码如下(数值不固定): ...

  4. [css]等高列的简单实现

    又碰到css等高布局的问题,发现以前没有总结,这里再把基本原理写一下吧. 1.负边距控制法. <div id="content"> <div class=&quo ...

  5. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  6. css设置多列等高布局

    初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...

  7. 如何用css实现"等高布局"。

    有时候为了让网页实现美观,在不知道高度的情况下,我们要用css实现等高布局效果,传统的方法, 我们可以用javascript实现,但是由于需求决定或者其他的情况下,我们只能用css实现,其方法主要是采 ...

  8. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  9. 关于css解决俩边等高的问题（等高布局）

    等高布局 前段时间公司需哦一个后台管理系统,左侧是导航栏,右侧是content区域.然厚刚开始用的是js 去控制的,但是当页面的椰蓉过长的时候,有与js单线程,加载比较慢,就会有那么一个过程,查找了很 ...

随机推荐

  1. sqlserver如何关闭死锁进程.

    1.首先我们需要判断是哪个用户锁住了哪张表. --查询被锁表 select request_session_id spid,OBJECT_NAME(resource_associated_entity ...

  2. PAT 02-线性结构1 两个有序链表序列的合并 (15分)

    本题要求实现一个函数,将两个链表表示的递增整数序列合并为一个递增的整数序列. 函数接口定义: List Merge( List L1, List L2 ); 其中List结构定义如下: typedef ...

  3. 部署IISHTTP 404.17无法由静态文件处理程序来处理

         部署IIS时候出现下图问题,这是因为IIS无法处理aspx.ashx等后缀名的文件,这是因为Web 服务器接收到请求时,会对所请求的文件的文件扩展名进行检查,确定应由哪个 ISAPI 扩展处 ...

  4. Hsqldb安装与使用

    HSQLDB是一个轻量级的纯Java开发的开放源代码的关系数据库系统,其体积小,占用空间小,使用简单,支持内存运行方式等特点.可以在http://sourceforge.net/projects/hs ...

  5. ASP.NET页面回车键触发Button按钮事件问题

    首先了解一下Button.UseSubmitBehavior属性. 获取或设置一个布尔值,该值指示 Button 控件使用客户端浏览器的提交机制还是 ASP.NET 回发机制. 如果该控件使用了客户端 ...

  6. nagios二次开发（四）---nagios监控原理和nagios架构简介

    nagios监控原理 下面根据上面摘自网络的原理图对nagios的监控原理进行一下简单的说明: 1.nagios通过nsca进行被动监控.那么什么是被动监控呢?被动监测:就是指由被监测的服务器主动上传 ...

  7. asp.net(C#)利用QRCode生成二维码(续)-在二维码图片中心加Logo或图像

    <%@ WebHandler Language="C#" Class="GetQRCode" %> using System; using Syst ...

  8. IDEA内存溢出问题：

    -Xms1024m -Xmx1024m -XX:MaxPermSize=512m 内存泄露是指程序中间动态分配了内存,但在程序结束时没有释放这部分内存,从而造成那部分内存不可用的情况,重启计算机可以解 ...

  9. cdnbest节点安装后连不上主控常见问题

    1. 查看节点程序是否启动 ps -aux |grep kangle 2. 如果节点程序都有启动,可查看日志,节点连接的是不是你帐号的uid帐号或者是否有其他报错信息 tail -f /var/log ...

  10. python 继承中的super

    python继承中子类访问父类的方法(包括__init__)主要有两种方法,一种是调用父类的未绑定方法,另一种是使用super(仅仅对于新式类),看下面的两个例子: #coding:utf-8 cla ...