CSS Fixed Fluid Columns with no extra markup?_问答_开发者

CSS Fixed Fluid Columns with no extra markup?

开发者 https://www.devze.com 2023-03-12 18:49 出处：网络

I\'m looking for a way to create a CSS layout where the left column is fluid and the right column is fixed using the exact markup below.I don\'t think it is开发者_运维技巧 possible. Am I wrong?

相关专题：css layout

I'm looking for a way to create a CSS layout where the left column is fluid and the right column is fixed using the exact markup below. I don't think it is开发者_运维技巧 possible. Am I wrong?

<div class="wrapper">
  <div class="left">Fluid Column</div>
  <div class="right">Fixed Column</div>
</div>

Yep. Try this:

<div id="wrapper">
    <div id="left">
        <div id="content">
            ...
        </div>
    </div>
    <div id="right">
        ...
    </div>
</div>

CSS:

#wrapper { width: 900px; }
#left { float: left; width: 100%; margin: 0 -100px 0 0 ; }
#content { margin: 0 100px 0 0; }
#right { float: right; width: 100px; }

Note: Remove wrapper if you want the width to be 100%.

It's probably not a viable solution at this point in time but if you are not adverse to using bleeding-edge CSS you could also use the CSS3 flex box module. Using vendor specific prefixes, it is currently supported in Firefox, and Webkit based browsers such as Safari and Google Chrome.

<!doctype html>
<style>
    .wrapper {
        display: -moz-box;
        display: -webkit-box;
        display: flexbox;
        -moz-box-orient: horizontal;
        -webkit-box-orient: horizontal;
        flex-direction: lr; /* box-orient has been renamed in the most recent version of the draft */
        width: 100%;
    }
    .right {
            width:150px;
            background-color: #eee;
    }
    .left {
            -moz-box-flex: 1;
            -webkit-box-flex: 1;
            flex-box: 1; /* box-flex has been renamed flex-box */
    }
</style>

<div class="wrapper">
  <div class="left">Fluid Column</div>
  <div class="right">Fixed Column</div>
</div>

For the sake of semantics, you might want to rename .left and .right to something like .content and .sidebar

Give this a shot:

* { padding:0px; margin:0px; }

.wrapper {
    position:absolute;
    width:100%;
    height:100%;
}
.left {
    position:absolute;
    top:0; bottom:0;
    left:0; right:150px;
    background-color:#999999;
}
.right {
    position:absolute;
    top:0; bottom:0;
    right:0; 
    width:150px;
    background-color:#AAAAAA;
}