1

I'm looking for a way to devide my screen perfectly into two divs. One small fixed sized on the left and one with dynamic width on the right.

I didn't figured out how to do this yet. Because the width in percentage is not proportional.

For example: http://jsfiddle.net/acmnU/2/

If you resize the result field or the overall width you see that the green div will not resize in proportion with the screen. If the field gets to small the green div slips under the red one.

what I need is some kind of anchor. So that the green div fill the entire screen without getting to big.

HTML:

<body>
    <div id="content">
        <div class="left">left</div>

        <div class="right">right</div>
    </div>
</body>

CSS:

body {
height: 300px;
}

#content {
    height: 100%;
}

.left {

    float: left;
    margin-left: 10px;
    background-color: red;
    height: 100%;
    width: 200px;
}
.right {
    float: left;
    margin-left: 10px;
    background-color: green;
    height: 100%;
    width: 80%;
}
4

2 回答 2

1

I hope I have interpreted your question correctly. You can try this fiddle

body {
    height: 300px;
}

#content {
    height: 100%;
}

.left {
    float: left;
    margin-left: 10px;
    background-color: red;
    height: 100%;
    width: 200px;
}
.right {
    margin-left: 200px;
    background-color: green;
    height: 100%;
}

I have set the margin-left of the .right to equal that of the width of .left. But don't float the right panel and it will fill the remaining space.

Result

于 2013-07-25T15:53:57.353 回答
0

I advise using a layout framework to ease this type of think. Bootstrap is a good one but there are lots of others.

If you want to do it manually, you need to give the Content class a width, and use relative positioning.

于 2013-07-25T15:56:59.350 回答