一見不可能な一見単純なCSSレイアウトですか？

私は一日中これを手にしていましたが、私が得た最も近いものは、Chromeで動作する次のレイアウトです（しかしFirefoxではそうではありません）。一見不可能な一見単純なCSSレイアウトですか？

テーブルを使用せずに（jを使用せずに）行うことはできますか？
クロスブラウザ（テーブルでもなく、jsでもない）を作ることは可能ですか？

目的の動作を確認するには、ウィンドウ/表示ボックスの高さを変更してみます。
主なポイントは次のとおりです。
1.レイアウトは常にウィンドウのサイズ以上ですが、左側のコンテンツがウィンドウを押すと展開できます。
2.右のスクロール可能領域は、常に内部空間全体を占めますが、展開しません。つまり、内部の高さは左のコンテンツ（またはウィンドウのサイズのいずれか大きい方）によって決まります。 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せずに間違いなく可能です。 –

@TimMedora、どのように進めるのか？ – Roman

テーブルを削除することから始めてください。長期的には本当に物事を楽にしません。私は単純なフィドルを作成しようとしていますが、そのトリックは行いますが、約束はしません:) –

最後に、いくつかのボックスサイズのハッキングを使用してそれを考え出しました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

古いブラウザのサポートについては、http：// html5pleaseの最新の推奨ポリフォールを確認してください。 com /＃ボックスサイズ via http://paulirish.com/2012/box-sizing-border-box-ftw/ – Snekse

これは実際のブラウザ（ChromeとFirefoxの）の両方で動作するようです

はここJSFiddleリンクです。あなたはここから始まり、それに応じて調整することができます。

<!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

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

ここではChromeとFirefoxで動作しますスタートです。固定ヘッダーとフッター、およびスクロールする右ペインで常に100％のレイアウトが表示されます。

残念ながら、左側面の成長を考慮していませんが、どのように進行するかについてのいくつかのアイデアがあります。はですが、現時点では完全な解決策は私には届いていません。

負のマージン
ボックスのサイズ変更
絶対的および相対的な位置決め
のミックスミックス：ここ

は完全なソリューションを見つけることであなたを助けることが、私が使用するいくつかのトリックです表示スタイル（インラインブロックは便利です）の

出典

2012-01-05 04:50:04

ありがとうございます。既に、絶対的および相対的な位置付けとともに、ボックスサイジングハッキングとマイナスマージンを試しました。インラインブロックを試したことはありませんが、これでどのように役立つかは不明です。 – Roman

@Roman - これが可能であるという私の以前の見解を撤回しなければならないかもしれません。私はいくつかの異なるアプローチを試しましたが、私は100％の高さの問題を抱えています。私が使っているアプローチの1つは、http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacksに詳しく説明されています。私たちがすでに実行しているのと同じ制限がいくつかありますが、それはほとんどの場合よりも良い出発点です。 –

F箱でサイジングハックを使って作業しました。私はあまり気にしませんでした。http://jsfiddle.net/vfMNw/ – Roman

一見不可能な一見単純なCSSレイアウトですか？

答えて

関連する問題