<html>
<head>
<title>div屏幕自适应宽度+两列中间栏等高</title>
<style type="text/css">
body{
padding:0;
margin:0;
text-align:center;
}
#wrapper{
width:90%;
height:auto;
margin:0 auto;
}
#header{width:100%;height:100px;background-color:red;float:left;clear:both;text-align:left;}
#main{width:100%;height:auto;float:left;clear:both;text-align:left;overflow:hidden;}
#left{width:30%;height:auto;float:left;text-align:left;background-color:yellow;}
#right{width:70%;height:auto;float:right;text-align:left;background-color:blue;}
#footer{width:100%;height:100px;float:left;clear:both;text-align:left;background-color:006600;}
#left,#right{padding-bottom:32767px;margin-bottom:-32767px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">HEADER<br />HEADER<br />HEADER<br /></div>
<div id="main">
<div id="left">LEFT<br />LEFT<br />LEFT<br />LEFT<br />LEFT<br />LEFT<br />
</div>
<div id="right">RIGHT<br />RIGHT<br />RIGHT<br /><br />
RIGHT<br />RIGHT<br />RIGHT<br /><br />
RIGHT<br />RIGHT<br />RIGHT<br /><br />
RIGHT<br />RIGHT<br />RIGHT<br /><br />
RIGHT<br />RIGHT<br />RIGHT<br /><br />
RIGHT<br />RIGHT<br />RIGHT<br /><br />
</div>
</div>
<div id="footer">FOOTER<br />FOOTER<br />FOOTER<br />FOOTER<br /></div>
</div>
</body>
</html>
分享到：
相关推荐
CSS多种方法实现div两列等高布局 ， 前端工程师必备知识，div两列等高
DIV＋CSS＋HTML布局（三行两列布局）
用DIV+CSS实现国内经典式三行两列布局,附图片
一个大的div id=content包含两个左右结构的div，id=side和id= main 并居中放置，下面是具体的示例代码，感兴趣的朋友可以参考下
js实现 1.两列的左右拖动改变div大小 2.三列的左右拖动改变div大小 3.两行的上下拖动改变div大小 可用于各种框架 vue React Angular
主要介绍了div+css实现两列table效果示例,需要的朋友可以参考下
DIV+CSS 网页布局第二篇：两列布局 1、宽度自适应两列布局 两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动，这样就省的再设置外边距了。 当元素使用了浮动之后，会对周围的元素造成影响，那么就...
div+css,web标准,div+css布局,div+css实例,div+css模板
div布局-Jquery 收起左栏、全屏 布局页头、页尾还有中间部分。页头页尾固定高度，中间高度自由伸缩。中间部分又分为三列，左右两列宽度固定，中间一列宽度自由伸缩
两列布局大概是最经典的一种网页布局方式了，本博客就是采用的这种布局。两列布局中，以主列(main)是自适应宽度，子列(sidebar)是固定宽度的情形最为常见。今天就来好好探讨一下如何实现这种定宽+自适应的两列布局。...
用z blog 的TAG列表只能单列显示, TAG多时把页面...我是利用巴士飞扬的文章列表插件busfly_randomsort, 在上面做了一点修改,把生成TAG的函数改了一下, 让生成两个div, Tag 包含在这两个div中,由此生成两列式的Tag列表.
CSS+DIV写的，上下固定高度，中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~
1，Flask 使用Bootstrap 导航条样式 2，页面div两列自适应
网页布局中常有的一种情况就是网页主体部分分成一行两列；而在很多种情况下，设计师们常把左右两列的背景色设计成不同色彩，以实现内容块的明显区分；但这样的设计给布局提出了一个看似简单，而实现非常难的问题；那...
目的很简单：有一个 ul>li 列表，默认为单列显示，把它变为两列显示。 方法1，使用DIV+CSS代码： 复制代码代码如下: <style type=”text/css”> .mycode{ width:300px; height:74px; float:left;} .mycode ul...
CSS两列布局，右侧固定，左侧自适应宽度.
左右结构两列布局宽屏模板，DIV CSS布局，蓝色风格，该模板经过W3C验证，符合web2.0标准。