2

CSSのみを使用して（jQueryやJavaScriptを使用せずに）スクロールバーを使用せずにブラウザーウィンドウの最後までストレッチする必要がありdiv.leftContent3ます。これは、IE7もサポートする方法で行います。div.bodyContent3どうやってするか？

HTML：

<div class="parent">
    <div class="leftPanel">
        <div class="leftContent1">
            Left Content1
        </div>
        <div class="leftContent2">
            Left Content2
        </div>
        <div class="leftContent3">
            Left Content3
        </div>
    </div>
    <div class="bodyContent">
        <div class="bodyContent1">
            Body Content1
        </div>
        <div class="bodyContent2">
            Body Content2
        </div>
        <div class="bodyContent3">
            Body Content3
        </div>
    </div>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}
html, body, .parent {
    height: 100%;
}
.parent {
    margin: auto;
    width: 1000px;
}
.leftPanel {
    float: left;
    width: 200px;
    height: 100%;
}
.bodyContent {
    float: left;
    width: 800px;
    height: 100%;
}
.leftContent1, .leftContent2, .leftContent3,
.bodyContent1, .bodyContent2, .bodyContent3 {
    border-bottom: 1px solid #000000;
    float: left;
    width: 100%
}
.leftContent1 {
    background-color: #cccccc;
    height: 125px;
}
.leftContent2 {
    background-color: #999999;
    height: 150px;
}
.leftContent3 {
    background-color: #ff0000;
    height: inherit;
}
.bodyContent1 {
    background-color: #fcfcfc;
    height: 120px;
}
.bodyContent2 {
    background-color: orange;
    height: 80px;
}
.bodyContent3 {
    background-color: #00ff00;
    height: inherit;
}
4

1 に答える 1

1

私があなたの質問を理解していれば、いくつかのposition:relative;, position:absolute;with top, left,rightを適用することで目標を達成できますbottom:

実際のフィドルの例を見てください!

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
  </head>
  <body>
    <div class="parent">
      <div class="leftPanel">
        <div class="leftContent1">Left Content1</div>
        <div class="leftContent2">Left Content2</div>
        <div class="leftContent3">
          Left Content3 This Section needs to beexpand till the end of
          the browser window Without having browser scroll
        </div>
      </div>
      <div class="bodyContent">
        <div class="bodyContent1">Body Content1</div>
        <div class="bodyContent2">Body Content2</div>
        <div class="bodyContent3">
          Body Content3 This Section needs to beexpand till the end of
          the browser window Without having browser scroll
        </div>
        </div>
      </div>
  </body>
</html>

CSS

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

.parent { margin:auto; width:1000px; }

.leftPanel { float:left; width:200px; height:100%; position:relative; }
.bodyContent { float:left; width:800px; height:100%; position:relative; }

.leftContent1, .leftContent2, .leftContent3, .bodyContent1,
.bodyContent2, .bodyContent3 {
    border-bottom: 1px solid #000000;
    position: absolute;
    left: 0;
    right: 0;
}

.leftContent1 { background-color:#cccccc; height: 125px; }
.leftContent2 { background-color:#999999; height: 150px; top:125px; }
.leftContent3 { background-color:#ff0000; top:275px; bottom:0; }

.bodyContent1 { background-color:#fcfcfc; height:120px; }
.bodyContent2 { background-color:orange; height:80px; top:120px; }
.bodyContent3 { background-color:#00ff00; top:200px; bottom: 0; }

ノート

Fiddle の分割バーをドラッグして、2 つの div の拡大と縮小を確認できます。

これについて読むには：

CSS ポジショニングとCSS ポジション プロパティ

于 2012-05-15T20:14:29.470 に答える