jquery - 3列设计:第三张图像延伸至100％

我正在建立一个新的网站，我想我已经使我的设计有点太复杂了，所以现在我正在与代码斗争。
我想让我的网站由三个栏目组成，这三个栏目彼此相邻。
第1列将有width:200px和height:100%这样它将垂直填充屏幕，然后在它旁边将有第二列width:500px和相同的height:100%。最后，最后一列将填充屏幕的其余部分，因此它将是width:100%和height:100%，在该列中，我想放置一个将拉伸并填充该div的图像。
有可能吗？非常感谢你的帮助。

最佳答案

这可以通过一点CSS来完成：
HTML格式

<div id="container">
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right">
        <img src="http://www.thegardenhelper.com/pixpg/graphics/sammy.jpg" />
    </div>
</div>

CSS

/*You want to make sure the document is set to the fullscreen width*/
html, body {
    width  : 100%;
    height : 100%;
}
/*Set the container div to the full size of the document and set its position to something other than `static` so its children will take their position relatively from it*/
#container {
    width      : 100%;
    height     : 100%;
    position   : relative;
    background : black;
}
/*absolutely position the left column to be 200px wide*/
#left {
    position : absolute;
    left     : 0px;
    top      : 0px;
    width    : 200px;
    height   : 100%;
}
/*absolutely position the middle column to be 500px wide and start 200px from the left*/
#middle {
    position   : absolute;
    left       : 200px;
    top        : 0px;
    width      : 500px;
    height     : 100%;
    background : blue;
}
/*absolutely position the right column to take the rest of the page starting from 700px from the left*/
#right {
    position   : absolute;
    left       : 700px;
    top        : 0px;
    right      : 0px;
    height     : 100%;
    background : red;
}
/*set the image to 100% height and width to fill its container (#right)*/
/*alternatively you can set the width of the image to `auto` so it will scale with the aspect ratio intact but still take-up 100% of the page's height*/
#right > img {
    width  : 100%;
    height : 100%;
    border : none;
}

下面是上述解决方案的一个jsfiddle：http://jsfiddle.net/jasper/7y9DZ/2/