Question

我在容器中有两个div：

<div id="outer">
    <div id="A">
        Test<br/>        
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
    </div>
    <div id="B"></div>
</div>

我需要的是＆＃39; B＆＃39;停留在底部并具有固定大小（200px）。＆＃39; A＆＃39;应该留在顶部，并填补剩余的可用空间。当我现在调整父元素＆＃39; B＆＃39;应保持在200px和＆＃39; A＆＃39;应该缩小。

我无法使用纯CSS，但我更愿意只使用CSS。

我已经制作了一个包含jQuery解决方案的小提琴，但我希望尽可能避免使用JavaScript进行布局。

http://jsfiddle.net/t6B2e/

Answer 1

作为其他答案的替代方案，您可以使用calc() CSS function：

#A{ 
    height: calc( 100% - 200px );
    width: 100%;
    background: #cccccc;
    overflow: auto;
}
#B{
    height: 200px;
    width: 100%;
    background: blue;
}

Example Fiddle
Browser support相当不错

Answer 2

你可以使用display:flex;但是将jQuery作为后备...或CSS作为后备。无论如何 basic example ：

body {background:black;color:white;}
#outer {
  display:flex;
  flex-direction:column;
}
html, body , #outer {
  height:100%;
  margin:0;
}
 #a {
   overflow:auto;
 }
#b {
  background:blue;
  min-height: 200px; /* you can use flex:1; to size it too */
}

重要提示：请勿使用大写字母或数字作为第一个字符命名ID或CLASS。这是不允许的，一些浏览器将遵循W3C的建议。 CSS无法应用。

要让一个成长，另一个收缩和溢出，您可以使用flex:xx;

进行调整

如果需要，两个div都有min-height并显示滚动条的示例。 蓝色的一个具有优先权，另一个具有最小高度，因此内容仍然可读

<强> Example Here

body {background:black;color:white;}
#outer {
  display:flex;
  flex-direction:column;
}
html, body , #outer {
  height:100%;
  margin:0;
}
#a, #b {
  min-height: 100px; /* don't give a min-height to #a and it can shrink down to zero */
  overflow:auto;
}
 #a {
   flex:2;
 }
#b {
  background:blue;
}

Answer 3

如果我理解正确，那么您需要做的就是更改#A css。

完整示例：

#A{ 
    position: absolute;
    bottom:200px;
    top: 0;
    max-height: 100%;
    width: 100%;
    background: #cccccc;
    overflow: auto;
}

#B{
    position:absolute;
    bottom: 0;
    height: 200px;
    width: 100%;
    background: blue;
}

基本上，我删除了height并添加了bottom:200px，这会强制元素的底部始终距父母的底部200px。

Here is a working example

Answer 4

如果你想要整个外部区域滚动，你可以用最少的CSS http://codepen.io/2ne/pen/mvoaw/

这样做

#outer {
  padding-bottom: 200px;
}

#A {
}

#B {
  position: fixed;
  bottom: 0;
  height: 200px;
  width: 100%;
  background: blue;
}

以动态方式定位两个水平div

4 个答案: