CSS Layout: 2 column fixed-fluid (again)

问题

I'm trying to setup a 2-column layout where the left area is fixed and the main content is fluid. I've seen several answers on here, which tend to work. However, there is some odd behavior when I use a "jsTree" in my "left" area and jQuery UI tabs in the main/content area.

html

<div id="main">
    <div id="left">
        <div id="tree">
        </div>
    </div>
    <div id="right">
        <ul>
            <li><a href="#a">A</a></li>
            <li><a href="#b">B</a></li>
            <li><a href="#c">C</a></li>
        </ul>
        <div id="a">
            <h3>A is here</h3>
        </div>
        <div id="b">
            <h3>B is here</h3>
        </div>
        <div id="c">
            <h3>C is here</h3>
        </div>
    </div>
</div>

css

#left {
    float: left;
    width: 200px;
    overflow: auto;
}

#right {
    margin: 0 0 0 200px;
}

javascript

$(document).ready(function() {
    $('#right').tabs();
    $('#tree').jstree({
        "plugins" : [ "json_data", "themes"],
        "json_data" : {
            "data" : [
                { 
                    "data" : "A node", 
                    "children" : [ "Child 1", "Child 2" ]
                },
                { 
                    "attr" : { "id" : "li.node.id" }, 
                    "data" : { 
                        "title" : "Long format demo", 
                        "attr" : { "href" : "#" } 
                    } 
                }
            ]
        }, 
    });
});

The problem I'm having is, as I expand the tree (on the left) the tabs on the right start getting funky. The area containing the tabs (the element I believe) grows vertically.

Take a look here for this example: http://jsfiddle.net/codecraig/gBUw2/

回答1:

Josiah has it right but a better solution is to change the nature of the clear-fix technique. The .ui-helper-clearfix does this:

.ui-helper-clearfix::after {
    clear: both;
    content: '.';
    display: block;
    height: 0px;
    visibility: hidden;
}

And the problem is the clear:both. You can get the desired clearing without losing the full-width block display with this:

#right .ui-helper-clearfix {
    clear: none;
    overflow: hidden;
}

That replaces the clear:both clear-fix with an overflow:hidden clear-fix.

http://jsfiddle.net/ambiguous/BkWWW/

回答2:

The widget tabs header has a clear fix. updated fiddle. You could fix this with a non float layout, or override the css like so:

#right .ui-helper-clearfix { display: inline-block; }

This makes it so that the header does not expand the full width of the container however.

回答3:

All you need to do is to simply tweak your css, like this:

#left {
    float: left;
    width: 23%;
    overflow: auto;
}

#right {
    float: left;
    width: 75%;
    display: block;
}

This would also fix the issue that the tabs' container don't expand full width. Though you could tune the width percentage of #right to whatever you like.

来源：https://stackoverflow.com/questions/5516743/css-layout-2-column-fixed-fluid-again

标签

jquery

css

jstree