css布局，面试时经常问的布局

标签：高度自适应   css布局   布局   ==   splay   lock   适应   html   ide   

左侧宽固定200，高度自适应，右侧的框宽度都自适应
<style>
    * {
        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;
    }
    #sidebar{
        min-height: 200px;
        height: auto !important;
        height: 200px;
    }
</style>

<div id="container">
    <div id="wrapper">
        <div id="sidebar">Left Sidebar</div>
        <div id="main">Main Content</div>
    </div>
</div>

css布局，面试时经常问的布局

标签：高度自适应   css布局   布局   ==   splay   lock   适应   html   ide   

原文地址：http://www.cnblogs.com/chaoyuehedy/p/6921395.html