不可能看似簡單的CSS佈局？

我一直在擺弄這一整天，我得到的最接近的是以下佈局，適用於Chrome（但不適用於Firefox）。不可能看似簡單的CSS佈局？

是否有可能沒有表（沒有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>

來源

2012-01-05 Roman

如果我理解正確的話，是的，這是絕對有可能不表和JS。 – 2012-01-05 04:14:46

@TimMedora，如何進行的任何指針？ – Roman 2012-01-05 04:17:16

從消除表開始。從長遠來看，它確實不會讓事情變得更容易。我試圖爲你創建一個簡單的小提琴，但沒有任何承諾:) – 2012-01-05 04:19:16

最後通過一些盒子大小的黑客來計算出來，謝謝t o @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>

來源

2012-01-05 19:18:32 Roman

對於較舊的瀏覽器支持，請檢查最新推薦的polyfill：http：// html5please。 com /＃box-sizing via http://paulirish.com/2012/box-sizing-border-box-ftw/ – Snekse 2012-12-20 23:14:41

這實際上似乎在這兩個瀏覽器（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>

來源

2012-01-05 04:32:20

感謝您的答案，但它缺少頁眉和頁腳。一旦你添加了這些，保持滾動框所需的高度變得不可能。 – Roman 2012-01-05 04:37:00

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

這裏是一個開始，在Chrome和Firefox的作品。它顯示了一個總是100％的佈局，包含一個固定的頁眉和頁腳，以及一個滾動的右側窗格。

不幸的是，它沒有考慮到左側的增長，但它應該給你一些關於如何進行的想法。它是可能的，但目前沒有完整的解決方案。

這裏是我使用它可以幫助您找到完整的解決方案的幾個招數：

切緣陰性
箱上漿
的絕對和相對定位的混合
混合的顯示樣式（內聯塊可以得心應手）

來源

2012-01-05 04:50:04

謝謝，已經嘗試了盒子大小的黑客和負邊距，以及絕對和相對定位。還沒有嘗試內聯塊，但不知道它如何可以幫助這一點。 – Roman 2012-01-05 05:03:22

@羅曼 - 我可能不得不收回我之前對此的看法。我嘗試了幾種不同的方法，但我一直遇到100％左右的高度問題。我使用的方法之一是在這裏詳細記錄：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks。它具有我們已經遇到的一些相同的限制，但它比大多數起點更好。 – 2012-01-05 06:12:06

最終得到它與框大小的黑客工作，感謝你我沒有gie了:) http://jsfiddle.net/vfMNw/ – Roman 2012-01-05 10:01:15

不可能看似簡單的CSS佈局？

回答

相關問題