Question

我需要将div.leftContent3和div.bodyContent3延伸到浏览器窗口的末尾而不使用单独使用CSS的滚动条（没有jQuery或JavaScript），并且还以支持IE7的方式执行此操作。怎么做？

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;
}

Answer 1

如果我确实理解了您的问题，您可以通过position:relative;，position:absolute;应用top，left，right，{{{{{}来实现目标。 1}}：

查看工作Fiddle Example!

<强> HTML

bottom

<强> CSS

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

注意

你可以拖动小提琴的分割栏，看看两个div增长和收缩。

要阅读此内容：

CSS Positioning和CSS position Property

如何从中间将任何div高度拉伸到浏览器窗口的末尾

1 个答案:

注意