<!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. Spring概念

    1.控制反转IOC:即生成对象,相当于new的功能,用IOC有利于维护. 2.依赖注入DI:即给属性赋值,相当于JavaBean的setter方法. 3.面向切面方程AOP:使得各个切面和目标类完全松 ...

  2. vim显示行号、语法高亮、自动缩进的设置

    转载自:http://blog.csdn.net/chuanj1985/article/details/6873830   在UBUNTU中vim的配置文件存放在/etc/vim目录中,配置文件名为v ...

  3. AWS多个EIP的解决方案

    前言 前段时间,公司部署在AWS上的一台EC2突然访问不了了,后来经过检测发现是被GWF给墙了,可能是我们经常拿这台服务器来FQ导致的,幸好这台服务器的客户都是在香港的,被墙了对客户没有什么影响,但是 ...

  4. 调用WCF Client客户端测试

    之后

  5. Python安装mysql-python错误提示python setup.py egg_info

    做python项目,需要用到mysql,一般用python-mysql,安装时遇到错误提示如下: Command "python setup.py egg_info" failed ...

  6. XidianOJ 1063 Chemistry Problem

    [提交][状态][讨论版] 题目描述 lw最近正在学习立体化学.立体化学中常用Fischer投影式表示分子的立体构型,例如,对于酒石酸HOOC(CHOH)2COOH,如果用一根横线表示羟基,略去氢原子 ...

  7. 文法 LL1

    <程序>-><声明列表>|<程序><函数> <声明列表>-><声明>|<声明><声明列表> ...

  8. TestLink安装及整合Jira

    TestLink安装及整合Jira 1.Testlink 安装部署 Testlink是一个开源的测试管理工具,主要用于管理测试用例,从测试需求.测试计划.测试用例管理和用例执行,到最后的结果分析,一套 ...

  9. [小哥Allegro72讲速成视频]

    http://v.qq.com/vplus/df932a993679cf80a0b6c87bb849e22c 第01讲 Allegro常用组件介绍 视频链接:http://v.qq.com/boke/ ...

  10. 因为此版本的应用程序不支持其项目类型(.csproj)”之解

    有的时候vs无缘无故的出现如下错误:"因为此版本的应用程序不支持其项目类型(.csproj),若要打开它,请使用支持此类型项目的版本" 解决办法:如果是这个提示,可能是由于你安装m ...