<!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. [C#基础知识] ReadOnly关键字修饰的变量可以修改，只是不能重新分配

    转自:http://www.cnblogs.com/sujiantao/archive/2011/12/19/2289357.html MSDN 官方的解释 readonly 关键字是可以在字段上使用 ...

  2. Ninject之旅之六：Ninject约定

    摘要 在小的应用系统中一个一个注册一些服务类型不怎么困难.但是,如果是一个实际的有上百个服务的应用程序呢?约定配置允许我们使用约定绑定一组服务,而不用一个一个分别绑定. 要使用约定配置,需要添加Nin ...

  3. 23. Can't connect to X11 window server using '127.0.0.1:0.0' as the value of the DISPLAY variable.解决办法

    在终端里 以root用户执行 #xhost + 然后su - oracle 执行#export DISPLAY=:0 运行runinstaller

  4. 解决低版本chrome浏览器不支持es6 Array.find()

     if (!Array.prototype.find) {  Array.prototype.find = function(predicate) {    'use strict';    if ( ...

  5. Managing IIS Log File Storage

    Managing IIS Log File Storage   You can manage the amount of server disk space that Internet Informa ...

  6. 利用Sql实现将指定表数据导入到另一个数据库示例

    因为工作中经常需要将数据从一个数据库导入到另一个数据库中,所以将这个功能写成一个存储过程,以方便调用.现在粘贴出来供大家参考: 注意:1,以下示例中用到了syscolumns,sysobjects等系 ...

  7. JS中的get & set

    之前在看<Javascript 高级程序设计>一书中遇到过getter和setter,但因当时难于理解,且觉得用处较小,没有细看,今日突然遇到了一种使用get&set读写对象属性的 ...

  8. 缓存工具CacheUtil - 并发环境的缓存值存取

    缓存工具CacheUtil - 并发环境的缓存值存取 目的 适合并发环境的缓存值存取 读取缓存值时,只需关注数据来源.不用再关注将源数据存入缓存等后续处理. 应用程序N次读取数据时,数据源读取一次,缓 ...

  9. SQL存储过程，使用事务（try catch），游标

    CREATE proc [dbo].[Sys_Rebate_Equity] AS )--用户ID ,)--总股权数 BEGIN begin try Begin Transaction --开始事务 D ...

  10. Error: Cannot open main configuration file '//start' for reading! 解决办法

    当执行service nagios start启动nagios时,报错:Error: Cannot open main configuration file '//start' for reading ...