Question

我有一个简单的两列布局：

<div class = "parent">
   <div class = "left-column">
   </div>
   <div class = "right-column">
   </div>
</div>
<div class = "footer"></div>

每列中的内容是动态的，因此无法预先预测每列的高度。但是，我要求RIGHT列具有始终延伸到页面底部的背景颜色，即使右列比左侧短得多。

要做到这一点，我给了＃34;父母＆＃34; position:relative和＆＃34;右列＆＃34;有：

.right-column {
   position:absolute; 
   height: 100%; 
   right: 0px; 
   background-color: blue;
}

完整的JSFiddle链接： http://jsfiddle.net/gsmbzaz9/1/

所以，当然，这里有很多问题。

首先，当我说height: 100%或<body>元素的<html>时，这意味着屏幕高度（不是页面高度），因此当我将页脚与bottom: 0相对于body放置时，会将页脚移动到屏幕的底部 - 而不是底部页。

如果我想在页脚中使用position: fixed，那就没问题，因此在滚动时页脚始终可见。但是，如果你一直滚动到底部，我希望页脚只能。

其次，在此示例中，右列比左侧更强。所以内容溢出超出parent div的底部，更糟糕的是，蓝色背景被剪裁。

所以，最终我正在寻找这种布局，如下所示：

+------+-------+
|      |       |
| LEFT | RIGHT |
|      |       |
+------+       |
       |       |
       |       |
+--------------+
|    FOOTER    |
+--------------+

...整个右栏都是蓝色的。我们也可能有一种情况，其中LEFT高于RIGHT，在这种情况下，RIGHT背后的蓝色背景会很好，但LEFT列内容会溢出页脚。

这似乎是一个非常常见的布局 - 我很惊讶我有多么困难。我已经用Google搜索了解在页面底部放置页脚div的各种技术，但是当有一个位于外面的绝对定位列时，我所见过的技术都没有处理过文件的流程。

那么，考虑到以下要求，使用CSS实现指定布局的一些技术是什么：

无法知道左右列的确切高度（由于动态内容）
RIGHT列必须始终具有延伸到底部页脚的背景颜色
页脚牢牢地固定在页面的底部（页面，不是屏幕），只有向下滚动到底部时才会显示（或如果内容足够小，没有滚动条）

Answer 1

这是一个小提琴http://jsfiddle.net/ysfeuzL3/3/

我使用了一些小的javascript解决方案。

现在根据您的要求，2列与divs（不是窗口）底部的页脚正确对齐，右列始终延伸到页脚的整个高度。

希望这有帮助

代码段....

function heightAdjust() {
  lHeight = $(".left-column").outerHeight();
  rHeight = $(".right-column").outerHeight();
  if (lHeight >= rHeight) {
    $(".right-column").outerHeight(lHeight);
  }
}

heightAdjust()

$(window).on('resize', function() {
  heightAdjust()
})

$(window).on('load', function() {
  heightAdjust()
})

		h1 {
		  padding: 20px;
		}
		.left-column {
		  float: left;
		  background: red
		}
		.right-column {
		  float: right;
		  background: blue;
		}
		.clearfix {
		  clear: both;
		}
		.footer {
		  background: aqua;
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<body>
  <div class="parent">
    <div class="left-column">
      <h1>Content</h1>

      <br/>
      <h1>Content</h1>

      <br/>
      <h1>Content</h1>

      <br/>
    </div>
    <div class="right-column">
      <h1>right</h1>
      <br/>
      <!-- remove these to see the height adjust -->
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <!-- remove these to see the height adjust -->
    </div>
  </div>
  <div class="clearfix"></div>
  <div class="footer">
    <h1>FOOTER</h1>

  </div>

Answer 2

以下是一种方法，我使用的重要属性是：

box-sizing：border-box -------- padding ----- display：table-cell ---- position：relative for footer -

内容很少的第一个片段

＆＃13;

* {
  margin: 0;
  padding: 0
}
html,
body {
  height: 100%
}
#cont {
  box-sizing: border-box;
  padding-bottom: 70px;
  display: table;
  width: 100%;
  height: 100%;
}
.footer {
  position: relative;
  top: -70px;
  height: 70px;
  z-index: 10;
  background: red;
}
.left-column > div {
  background: blue;
  padding: 20px;
  color: white;
}
.right-column {
  background: orange;
}
.left-column,
.right-column {
  box-sizing: border-box;
  min-height: 100%;
  display: table-cell;
  width: 50%;
}

＆＃13;

<div id="cont">
  <div class="left-column">
    <div>
      <h1>Content</h1>
    </div>
  </div>
  <div class="right-column">
  </div>
</div>
<div class="footer"></div>

＆＃13;

第二个包含更多滚动条内容的片段

＆＃13;

* {
  margin: 0;
  padding: 0
}
html,
body {
  height: 100%
}
#cont {
  box-sizing: border-box;
  padding-bottom: 70px;
  display: table;
  width: 100%;
  height: 100%;
}
.footer {
  position: relative;
  top: -70px;
  height: 70px;
  z-index: 10;
  background: red;
}
.left-column > div {
  background: blue;
  padding: 20px;
  color: white;
}
.right-column {
  background: orange;
}
.left-column,
.right-column {
  box-sizing: border-box;
  min-height: 100%;
  display: table-cell;
  width: 50%;
}

＆＃13;

<div id="cont">
  <div class="left-column">
    <div>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
    </div>
  </div>
  <div class="right-column">
  </div>
</div>
<div class="footer"></div>

＆＃13;

Answer 3

此解决方案中使用了jquery。继承人fiddle。它考虑到以下要求：

- 正确的列需要扩展到可滚动页面的底部，无论它是否包含比左列更多的内容或更少的内容

-no absolutes

-footer位于页面底部

- 右列的最小高度到达窗口的底部

的CSS：

h1 {
    padding: 20px;
}
.left-column {
    width: 50%;
    display:inline-block;
    /* background-color: blue; */
}
.right-column {
    width: 50%;
    min-height: 100%;
    display:inline-block;
    float: right;
    background-color: lightblue;
}
.footer {
    text-align: center;
    width: 100%;
    display:inline-block;
    /* background-color: yellow; */
}

jquery的：

var leftHeight = $('.left-column').height();
var rightHeight = $('.right-column').height();
var windowHeight = $(window).innerHeight();
var footerHeight = $('.footer').height();

console.log(leftHeight, rightHeight, windowHeight);

if(leftHeight > windowHeight && leftHeight > rightHeight) {
    $('.right-column').height(leftHeight);
}
if(windowHeight > leftHeight && windowHeight > rightHeight) {
    $('.right-column').height(windowHeight - footerHeight);
}

带有页脚和绝对定位的2列布局，右列100％高度

3 个答案:

内容很少的第一个片段

第二个包含更多滚动条内容的片段