html 最小宽度 固定,html div 一侧固定，另一侧宽度自适应

一、左侧固定

示例一：

测试

*{

margin: 0;

padding: 0;

}

.main{

width: 100%;

height: auto;

}

.main div{

height: 80px;

}

#left {

float: left;

width: 220px;

background-color: green;

}

#content {

background-color: orange;

margin-left: 220px;/*==等于左边栏宽度==*/

}

Left sidebar

Main Content

示例二：

测试

*{

margin: 0;

padding: 0;

}

.main{

width: 100%;

height: auto;

position: absolute;

}

.main div{

height: 80px;

}

#left {

float: left;

width: 220px;

background-color: green;

}

#content {

background-color: orange;

position: absolute;

top:0px;

right: 0px;

left: 220px;/*==等于左边栏宽度==*/

}

Left sidebar

Main Content

示例三.

测试

* {

margin: 0;

padding: 0;

}

html {

height: auto;

}

body {

margin: 0;

padding: 0;

}

#container {

background: #ffe3a6;

}

#wrapper {

display: inline-block;

border-left: 200px solid #d4c376;/*==此值等于左边栏的宽度值==*/

position: relative;

vertical-align: bottom;

}

#sidebar {

float: left;

width: 200px;

margin-left: -200px;/*==此值等于左边栏的宽度值==*/

position: relative;

}

#main {

float: left;

}

#maing,#sidebar{

min-height: 200px;

height: auto !important;

height: 200px;

}

Left Sidebar

Main Content

示例四：

测试

* {

margin: 0;

padding: 0;

}

#container{

display: flex;

display: -webkit-flex;

flex-direction: row;

}

#container div{

height: 100px;

}

#sidebar{

background-color: #f09452;

width: 200px;

}

#main{

flex:1;

background-color: #a09f52;

}

Left Sidebar

Main Content

示例五

测试

* {

margin: 0;

padding: 0;

}

#container{

display:table;

width: 100%;

}

#container #wrapper{

display:table-row;

height: 100px;

width: 100%;

}

#container #wrapper div{

display: table-cell;

}

#sidebar{

background-color: #f09452;

width: 200px;

}

#main{

background-color: #a09f52;

}

Left Sidebar

Main Content

二、右侧固定

示例一：

测试

* {

margin: 0;

padding: 0;

}

#container{

width: 100%;

}

#container #wrapper div{

height: 100px;

}

#main{

float: right;

width: 200px;

background-color: #f92;

}

#sidebar{

float: left;

background-color: #29f;

margin-left: -200px;

width: 100%;

}

#container #wrapper:after{

content: ' ';

clear: both;

display: block;

}

Left Sidebar

Main Content

示例二：

测试

* {

margin: 0;

padding: 0;

}

#container{

width: 100%;

}

#container #wrapper{

display: flex;

flex-direction: row;

}

#container #wrapper div{

height: 100px;

}

#main{

width: 200px;

background-color: #f92;

}

#sidebar{

background-color: #29f;

flex:1;

}

#container #wrapper:after{

content: ' ';

clear: both;

display: block;

}

Left Sidebar

Main Content