2列布局与页脚和绝对定位，100％高度右列 [英] 2-column layout with footer and absolutely positioned, 100% height right column

查看：121
本文介绍了2列布局与页脚和绝对定位，100％高度右列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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



为了实现这一点，我给了parent position：relative ，right-column / p> 

  .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 与页脚，以便页脚总是可视的，你滚动。但是这里我希望页脚只有 可见。如果你滚动到底部。



其次，右边的列是TALLER在这个例子中的左边。所以内容溢出超过 parent div的底部，更糟的是，蓝色背景被剪切。



所以，最终我正在寻找这个布局呈现如下：

  + ------ + --- ---- + 
 | | | 
 |左|右| 
 | | | 
 + ------ + | 
 | | 
 | | 
 + -------------- + 
 | FOOTER | 
 + -------------- +

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



这看起来像一个很常见的布局 - 我惊讶我有多么困难。我已经试图学习关于在页面底部定位页脚div的各种技术，但我所看到的技术都没有处理这种情况，当一个绝对定位的列位于



因此，使用CSS实现指定布局的一些技术，考虑到以下要求：


  1. 无法得知左栏和右栏的确切高度（由于动态内容）


  2. RIGHT栏必须总是具有延伸到底部页脚的背景颜色


  3. 页脚停留在页面的底部 （页面不是屏幕），只有向下滚动到底部（或者内容足够小，没有滚动条）才会显示。



解决方案

这里有一种方法可以做到这一点，我使用的重要属性是：


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




具有少量内容的第一个代码段



  * {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指数：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％;}  

 < div id = cont> < div class =left-column> < div> < h1>内容< / h1> < / div> < / div> < div class =right-column> < / div>< / div>< div class =footer>< / div>

>

带滚动条的更多内容的第二个代码片段



  * {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指数：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％;}  

 < div id = cont> < div class =left-column> < div> < h1>内容< / h1> < h1>内容< / h1> < h1>内容< / h1> < h1>内容< / h1> < h1>内容< / h1> < h1>内容< / h1> < h1>内容< / h1> < h1>内容< / h1> < h1>内容< / h1> < h1>内容< / h1> < h1>内容< / h1> < h1>内容< / h1> < h1>内容< / h1> < / div> < / div> < div class =right-column> < / div>< / div>< div class =footer>< / div>

>

I have a simple two column layout:

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

The content within each column is dynamic, and thus the height of each column cannot be predicted in advance. However, I have a requirement that the RIGHT column has a background color that ALWAYS extends to the bottom of the page, even if the right column is much shorter than the left.

To accomplish this, I gave "parent" position:relative, and "right-column" has:

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

Full JSFiddle link: http://jsfiddle.net/gsmbzaz9/1/

So, of course, there's many issues here.

Firstly, it seems that when I say height: 100% of the <body> or <html> element, that means the screen height (not the page height), so when I position the footer with bottom: 0 relative to body, it moves the footer to the bottom of the screen - not the bottom of the page.

That would be fine if I wanted to use position: fixed with the footer, so that the footer was always visible as you scroll. But here I want the footer to only be visible if you scroll all the way to the bottom.

Secondly, the right column is TALLER than the left in this example. So the content spills over beyond the bottom of the parent div, and worse, the blue background is clipped.

So, ultimately I'm looking for this layout to render as follows:

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

...where the entire right column is blue. We also may have a situation wherein LEFT is taller than RIGHT, in which case the blue background behind RIGHT will be fine, but the LEFT column content spills over the footer.

This seems like a pretty common layout - I'm surprised how much difficulty I've had. I've googled around trying to learn about various techniques for positioning a footer div at the bottom of the page, but none of the techniques I've seen deal with the case when there is an absolutely positioned column that lies outside the flow of the document.

So, what are some techniques using CSS to achieve the specified layout, taking into account the requirement thats:

  1. The exact height of the left and right columns cannot be known (due to dynamic content)

  2. The RIGHT column must always have a background color that extends to the bottom footer

  3. The footer stays firmly planted at the bottom of the page (page, not screen) and is only visible when you scroll down to the bottom (or if the content is small enough that there are no scrollbars)

解决方案

Here is One way to do this, the important properties I've used are:

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

First Snippet With Few Content

* {
  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%;
}

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

Second Snippet With More Content With Scrollbars

* {
  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%;
}

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

这篇关于2列布局与页脚和绝对定位，100％高度右列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆