Question

我整整都在摆弄这一天，而我得到的最接近的是以下适用于Chrome的布局（但不适用于Firefox）。

是否可以不使用表格（没有js）？
是否可以跨浏览器（表格与否，但没有js）？

要查看所需的行为，请尝试更改窗口/显示框的高度要点是：
1.布局始终至少是窗口的大小，但如果左侧的内容推动它，则可以扩展 2.右侧的可滚动区域总是占据整个内部空间，但不会展开它，这意味着内部的高度由左侧内容（或窗口大小，以较大者为准）决定。

这是一个JSFiddle链接：http://jsfiddle.net/BNmJM/
代码：

<!doctype html>
<html>
<head>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    border: 0;
}
html, body {
    height: 100%;
}
td{
    vertical-align:top;
}
#wrapper{
    border-collapse: collapse;
    border-spacing: 0;
    width:500px;
    margin:0 auto;
    border-left:2px dashed black;
    border-right:2px dashed black;
    height: 100%;
}
</style>
</head>
<body>
<table id="wrapper">
    <tr><td colspan=2 style="height:20px;">
        <div style="border-bottom:2px dashed black;height:20px;text-align:center;">header</div>
    </td></tr>
    <tr>
        <td>
            <div id="contentLeft" style="height:300px; width:100px;border:6px dashed green;"></div>
        </td>
        <td style="width:100px;border-left:2px dashed black">
            <div style="height:100%;width:100px;overflow-y:scroll;">
                <div id="contentRight" style="height:500px; width:60px;border:6px dashed red;"></div>
            </div>
        </td>
    </tr>
    <tr><td colspan=2 style="height:20px;">
        <div style="border-top:2px dashed black;height:20px;text-align:center;">footer</div>
    </td></tr>
</table>
</body>
</html>

Answer 1

这实际上似乎适用于两种浏览器（Chrome和Firefox）。你可以从这里开始并相应调整。

<!doctype html>
<html>
<head>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    border: 0;
}
html, body {
    height: 100%;
}
td{
    vertical-align:top;
}
#wrapper{
    position: absolute;
    top 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border-collapse: collapse;
    border-spacing: 0;
    width:500px;
    margin:0 auto;
    border-left:2px dashed black;
    border-right:2px dashed black;
    height: 100%;
}
</style>
</head>
<body>
    <div id="wrapper">
        <div id="left-menu" style="width: 100px; height: 100px; border: 1px solid black; float: left;"></div>
        <div id="middle-content" style="width: 100px; height: 100px; border: 1px solid black; float: left;"></div>
        <div id="right-scroll" style="width: 100px; height: 100%; overflow-y: scroll; border: 1px solid black; float: left;"></div>
        <div style="clear: both;"> </div>
    </div>
</body>
</html>

Answer 2

http://jsfiddle.net/cSTzA/5/

这是一个适用于Chrome和Firefox的开始。它显示的布局始终为100％，具有固定的页眉和页脚，以及滚动的右侧窗格。

不幸的是，它没有考虑左侧的增长，但它应该给你一些关于如何继续的想法。可能，但目前还没有找到完整的解决方案。

以下是我使用的一些技巧，可以帮助您找到完整的解决方案：

负利润
箱上浆
绝对和相对定位的混合
混合显示样式（内联块可以很方便）

Answer 3

最后通过@Tim Medora的帮助，使用了一些盒装大小的黑客来解决这个问题！不幸的是，盒子大小在IE7中不起作用。如果有人需要，这是JSFiddle：http://jsfiddle.net/vfMNw/
代码：

<!doctype html>
<html><head>
    <style media="screen" type="text/css">
    html,
    body {
        margin:0;
        padding:0;
        height:100%;
    }
    #container {
        min-height:100%;
        position:relative;
    }
    #header {
        position:absolute;
        z-index:2;
        background:#ff0;
        padding:10px;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;  
        height:70px;
        width:100%;
    }
    #body {
        padding:10px;
        padding-bottom:60px;    /* Height of the footer */
    }
    #body1 {
        height: 100%;
        background-color: #aaa;
        position: absolute;
        border-top: 70px solid black;
        top: 0;
        border-bottom: 50px solid black;
        overflow-y: scroll;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;  
        right: 0;
        width:100px;
    }
    #footer {
        position:absolute;
        bottom:0;
        width:100%;
        height:50px;            /* Height of the footer */
        background:#6cf;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box; 
    }
    /* other non-essential CSS */
    #header p,
    #header h1 {
        margin:0;
        padding:10px 0 0 10px;
    }
    #footer p {
        margin:0;
        padding:10px; 
    }
    </style>
    <!--[if lt IE 7]>
    <style media="screen" type="text/css">
    #container {
        height:100%;
    }
    </style>
    <![endif]-->
</head>
<body>
<div id="container">
    <div id="header">
        <h1>How to keep footers at the bottom of the page (CSS demo)</h1>
    </div>
    <div id="body">h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br></div>
    <div id="body1">
        h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>
    </div>
    <div id="footer">
        <p><strong>Footer</strong> (always at the bottom). View more <a href="http://matthewjamestaylor.com/blog/-website-layouts">website layouts</a> and <a href="http://matthewjamestaylor.com/blog/-web-design">web design articles</a>.</p>
    </div>
</div>
</body>
</html>

不可能看似简单的CSS布局？

3 个答案: