<!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. Ninject之旅之五：Ninject XML配置

    摘要 使用XML配置,需要添加Ninject XML扩展的引用.下一步是添加一个或多个包含类型注册的XML文件.记得这些文件应该跟应用程序一起发布.因此不要忘记将XML文件的属性设置成“Copy if ...

  2. ArcGIS api fo silverlight学习二（silverlight加载GraphicsLayer）

    上一节学习了silverlight加载GeoServer发布的WMS地图,这一节学习一下加载GraphicsLayer 一.加载.png或jpg文件图标 1.在MainPage.xaml中添加资源配置 ...

  3. PriorityQueue优先队列用法入门

    PriorityQueue是队列的一种,它叫做优先队列,该类实现了Queue接口. 之所以叫做优先队列,是因为PriorityQueue实现了Comparator这个比较接口,也就是PriorityQ ...

  4. QRCode二维码生成

    pom配置 <dependency> <groupId>com.github.cloudecho</groupId> <artifactId>qrcod ...

  5. zxing--条码图像处理库

    ZXing是一个开放源码的,用Java实现的多种格式的1D/2D条码图像处理库,它包含了联系到其他语言的端口.Zxing可以实现使用手机的内置的摄像头完成条形码的扫描及解码.   该项目可实现的条形码 ...

  6. 无线路由!RTS DTIM阈值、Beacon 周期如何设置多少可以加快路由

    无线路由!RTS DTIM阈值.Beacon 周期如何设置多少可以加快路由 DTIM阈值是使用无线路由器时无线发送数据包的频率.1间隔最低,255最高[1]  但是想要使连接的设备达到最高运行速度,调 ...

  7. git 忽视大小写

    git config core.ignorecase false http://stackoverflow.com/questions/3011625/git-mv-and-only-change-c ...

  8. 利用Aspose.Pdf将扫描的电子书修改为适合在kindle上查看

    很多扫描版的电子书,留有很大的页边距,大屏的设备看起来没有啥影响,可是在kindle上看起来就麻烦了,放大操作简直就没法用,最好能把留白去掉. 将pdf文件转换为图片这个看看 例子里的 JpegDev ...

  9. Redis从基础命令到实战之散列类型(Hash)

    从上一篇的实例中可以看出,用字符串类型存储对象有一些不足,在存储/读取时需要进行序列化/反序列化,即时只想修改一项内容,如价格,也必须修改整个键值.不仅增大开发的复杂度,也增加了不必要的性能开销. 一 ...

  10. 2 Egg Problem

    继续我们的推理问题之旅,今天我们要对付的是一个Google的面试题:Two Egg Problem. 我们开始吧! No.2  Google Interview Puzzle : 2 Egg Prob ...