如何仅使用CSS实现此布局？

我试图建立一个布局，有两个div块紧挨着对方。它们都位于页面的中心。左侧块（1）的宽度随窗口中可用空间的大小而变化（从最小300px到最大400px）。块2的固定宽度为640px，不会改变。两个块的高度都延伸到页面底部。如果一个块比另一个块长，则另一个块将使用空白（仍应用背景色）进行补偿

Youtube的视频页面可以作为一个例子，但是在我的例子中，较大的块在右边。请注意，当调整窗口大小时，youtube的右块（建议视频）是如何从300-400px变大或变小的

这是我能提供的最好的：

正文{
保证金：0；
填充：0；
身高：100%；
}
#包装纸{
最大宽度：1040px；
最小宽度：940px；
保证金：0自动；
高度：自动；
最小高度：100%；
}
#左{
浮动：左；
最小宽度：300px；
最大宽度：400px；
身高：100%；
背景：#EEE；
}
#对{
浮动：对；
宽度：640px；
身高：100%；
背景:#666；
}
左边
正确的

两个问题：

1） 我无法让潜水艇延伸到底部

2） 向块1添加浮点将使“最小宽度”属性无效

我正在寻找一个JS和CSS媒体查询免费解决方案，如果可能的话

---

任何人都有线索吗？

这里有一种使用

显示的方法：表格单元格

html {
    height: 100%;
}
body {
    margin:0;
    padding:0;  
    height:100%;
}

#wrapper {
    margin:0 auto;  
    height: 100%;
    display: table;
    min-width: 940px;
}

#left {
    display: table-cell;
    height:100%;
    min-width: 300px;
    max-width: 400px;
    background:#EEE;
}

#right {
    display: table-cell;
    width: 640px;
    height: 100%;
    background:#666;    
}

要使面板达到浏览器高度的100%，需要在
html
元素上设置高度

这种行为可能接近你所需要的

请参见演示：
我的解决方案设置为包装器显示：表格
，其子项设置为
显示：表格单元格

html {
    height: 100%;
}
body {
    margin:0;
    padding:0;  
    height:100%;
}

#wrapper {
    margin:0 auto;  
    height: 100%;
    display: table;
    min-width: 940px;
}

#left {
    display: table-cell;
    height:100%;
    min-width: 300px;
    max-width: 400px;
    background:#EEE;
}

#right {
    display: table-cell;
    width: 640px;
    height: 100%;
    background:#666;    
}

当其中一个溢出屏幕大小时，两个区域都将底部展开。如果不是，两者都将扩展到底部（100%）


HTML:

也许是这样的

有几件事：

您需要添加

html {
height:100%;
}

获取html的子元素以适应窗口。然后从
包装器中删除
height:auto

如果在包装器上设置了以像素为单位的最大宽度，而没有告诉它相对于窗口的可变宽度（如
宽度：90%
），则当浏览器调整大小时，内容的大小无法更改，因为它们的宽度是固定的

所以我添加了
width:90%
用于演示目的。您可以将其设置为您认为在窗口中看起来不错的任何百分比

在html中，将
右侧
div置于
左侧
之前，如下所示：

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

如果您使用jQuery，下面是我的答案：

$(document).ready(function() {
layoutInit();

$(window).resize(function() {
  layoutInit();
});

function layoutInit() {
    // you can also hard code the max-width and min-width in the javascript,
    // following function is used to remove "px" on "1040px"-like strings from CSS
    var pxStriper = function(str) {
        return str.substr(0, str.length - 2);
    }

    // all parameters you need to update the layout:
    var bodyWidth = $("body").width(),
        bodyHeight = $("body").width(),
        wrapperMaxWidth = pxStriper($("#wrapper").css("max-width")),
        wrapperMinWidth = pxStriper($("#wrapper").css("min-width")),
        rightWidth = pxStriper($("#right").css("width"));

    // 3 different situations with width of the body:
    if (bodyWidth <= wrapperMaxWidth && bodyWidth >= wrapperMinWidth) {
        // 1:
        $("#wrapper").css('width', bodyWidth);
        $("#left").css('width', bodyWidth - rightWidth);
    } else {
        if (bodyWidth > wrapperMaxWidth) {
            // 2:
            $("#wrapper").css('width', wrapperMaxWidth);
            $("#left").css('width', wrapperMaxWidth - rightWidth);
        } else {
            // 3:
            $("#wrapper").css('width', wrapperMinWidth);
            $("#left").css('width', wrapperMinWidth - rightWidth);                
        }
    }

    // update the height:
    $("#wrapper").height(bodyHeight)
}});

$（文档）.ready（函数（）{
layoutInit（）；
$（窗口）。调整大小（函数（）{
layoutInit（）；
});
函数layoutInit（）{
//您还可以在javascript中硬编码最大宽度和最小宽度，
//以下函数用于从CSS中删除“1040px”类字符串上的“px”
var pxstripper=函数（str）{
返回str.substr（0，str.length-2）；
}
//更新布局所需的所有参数：
var bodyWidth=$（“body”）.width（），
车身高度=$（“车身”）.width（），
wrapperMaxWidth=PXstripper（$（“#wrapper”）.css（“最大宽度”），
wrapperMinWidth=PXstripper（$（“#wrapper”）.css（“最小宽度”），
rightWidth=PXstripper（$（“#right”）.css（“width”）；
//车身宽度有3种不同情况：
如果（bodyWidth=wrapperMinWidth）{
// 1:
$（“#包装器”）.css（'width'，bodyWidth）；
$（“#左”）.css（'width'，bodyWidth-rightWidth）；
}否则{
如果（bodyWidth>wrapperMaxWidth）{
// 2:
$（“#wrapper”）.css（'width'，wrapperMaxWidth）；
$（“#左”）.css（'width'，wrapperMaxWidth-rightWidth）；
}否则{
// 3:
$（“#wrapper”）.css（'width'，wrapperMinWidth）；
$（“#左”）.css（'width'，wrapperMinWidth-rightWidth）；
}
}
//更新高度：
$（“#包装”）.高度（车身高度）
}});
您关心浏览器支持吗？这可以使用
display:table cell
完成。是的，我希望大多数浏览器都支持它。好的，您需要为自己定义“大多数浏览器”<代码>显示：表格
及其对应项（例如，
表格单元格
）包括返回IE8。如果您不需要支持比IE8更远的功能，那么表显示CSS规则就非常棒了。当减小窗口大小时，左侧块的宽度似乎并没有缩小，相反，右侧块被推向窗口right@deArtish这不是我所看到的行为（Win7，Chrome31）如果我理解你的描述。当使页面变窄时，我看到左侧块首先开始从
400px
减小到
300px
宽度，而右侧块停止移动（并且没有被推到视图之外）。在左块点击
300px
后，两个块继续被推离屏幕进入右侧（左侧固定在屏幕左侧）。只有当窗口中没有更多可用宽度时，左块的宽度才会减小。我没有注意到左边区块的宽度有任何变化all@deArtish你用的是什么浏览器？它似乎在做你想让它做的事情，至少对我来说是这样。我正在使用Chrome。当我调整窗口大小时，左面板的宽度不会改变。左面板的宽度对我来说不会改变，这是OP试图实现的一个功能。我已经更新了答案。只需将宽度设置为弹性列，并定义最大值和最小值。为此，表也必须有一个定义的弹性大小（宽度：100%和最大/最小宽度…）现在右面板也在改变宽度，而OP希望它保持静态宽度，而不管页面/其他元素的状态。我通过添加最小宽度：640px和
html {
height:100%;
}

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

html, body{
margin:0;
padding:0;  
height:100%;
}

#wrapper {
max-width:1040px;
min-width:940px;
margin:0 auto;  
height: 100%;
width:90%;
}

#left {
overflow:hidden;
height:100%;
background:#EEE;
}

#right {
float:right;
width:640px;
height:100%;
background:#666;    
}

$(document).ready(function() {
layoutInit();

$(window).resize(function() {
  layoutInit();
});

function layoutInit() {
    // you can also hard code the max-width and min-width in the javascript,
    // following function is used to remove "px" on "1040px"-like strings from CSS
    var pxStriper = function(str) {
        return str.substr(0, str.length - 2);
    }

    // all parameters you need to update the layout:
    var bodyWidth = $("body").width(),
        bodyHeight = $("body").width(),
        wrapperMaxWidth = pxStriper($("#wrapper").css("max-width")),
        wrapperMinWidth = pxStriper($("#wrapper").css("min-width")),
        rightWidth = pxStriper($("#right").css("width"));

    // 3 different situations with width of the body:
    if (bodyWidth <= wrapperMaxWidth && bodyWidth >= wrapperMinWidth) {
        // 1:
        $("#wrapper").css('width', bodyWidth);
        $("#left").css('width', bodyWidth - rightWidth);
    } else {
        if (bodyWidth > wrapperMaxWidth) {
            // 2:
            $("#wrapper").css('width', wrapperMaxWidth);
            $("#left").css('width', wrapperMaxWidth - rightWidth);
        } else {
            // 3:
            $("#wrapper").css('width', wrapperMinWidth);
            $("#left").css('width', wrapperMinWidth - rightWidth);                
        }
    }

    // update the height:
    $("#wrapper").height(bodyHeight)
}});