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

如果我确实理解了您的问题，您可以通过应用 some 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 的拆分栏来查看两个 div 的增长和缩小。

要阅读此内容：

CSS 定位和CSS 位置属性

于 2012-05-15T20:14:29.470 回答