Question

layout

我正在尝试构建一个彼此相邻的两个div块的布局。它们都以页面为中心。左侧块（1）的宽度取决于窗口中可用空间的大小（从最大300px到最大400px）。块2具有640px的固定宽度并且不会改变。块的高度都延伸到页面底部。如果一个块比另一个块长，则会补偿白色空间（仍然应用背景颜色）。

Youtube的视频页面可用作示例，但在我的情况下，较大的块位于右侧。请注意当调整窗口大小时，youtube的右侧块（建议视频）如何从300-400px变大或变小。

这是我能带来的最好的：

http://jsfiddle.net/7dL5z/

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

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

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

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

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

两个问题：

1）我无法将div扩展到底部。

2）向块1添加浮动使得min-width属性无效

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

任何人都有线索？

Answer 1

以下是使用display: table-cell进行此操作的一种方法。

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元素上设置高度。

行为可能接近您的需要。

请参阅演示：http://jsfiddle.net/audetwebdesign/ZVN97/

Answer 2

一些事情：

您需要添加

html {
height:100%;
}

获取html的子元素以适合窗口。然后从height:auto中删除wrapper。

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

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

将right div放在你的left之前的html中，如下所示：

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

然后您可以使用left填充right留下的空格，而不必将其浮动或告诉它宽度。设置最大值和最大值包装器上的最小宽度将使left变得太小或太大。

所以最终的css将是：

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;    
}

Answer 3

我的解决方案是将包装设置为display: table＆amp;它的孩子到display:table-cell。

当其中一个区域溢出屏幕尺寸时，两个区域都会向下扩展。如果没有，两者都将扩大到底部（100％）。

http://jsfiddle.net/7dL5z/4/

HTML：

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

CSS：

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

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

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

#right {
    display: table-cell;
    background:#666;    
}

Answer 4

这样的事情http://jsfiddle.net/pmj7Z/可能吗？

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

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

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

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

Answer 5

如果你使用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)
}});

如何才能使用CSS实现此布局？

5 个答案: