从下到上垂直展开DIV答案

【问题标题】：Expand DIV vertically from the bottom to the top从下到上垂直展开DIV
【发布时间】：2012-01-11 15:11:56
【问题描述】：

我想在不使用百分比或函数（仅 css）的情况下从底部到顶部垂直扩展 DIV。我有两个 div，但只有第二个有定义的高度，所以我必须用我的第一个 div 修复其余空间。

这是我的代码：

<html>
<head>
  <style>
    #one { position: absolute; width: 100%; background: red; top: 0 }
    #two { position: absolute; width: 100%; background: yellow; bottom: 0; height: 200 }
  </style>
</head>

<body>
  <div id="one">"DIV 1" has to be stucked to "DIV 2"</div>
  <div id="two">I wanna "DIV 2" determines the height of "DIV 1"</div>
</body>

</html>

You can put the code here to see what I'm getting

问题是红色的 div 停留在顶部：S

任何帮助将不胜感激，感谢您的宝贵时间！友好，春波哥兽

【问题讨论】：

请使用 jsFiddle 向我们展示您的代码。我已经为您复制并粘贴了您的代码。 http://jsfiddle.net/peduarte/RnKmE/.

标签： css html expand

【解决方案1】：

如果我正确理解了你的问题，这应该是你所追求的：

http://jsfiddle.net/peduarte/RnKmE/1/

*编辑*

我不确定您是否可以使用 CSS 来做到这一点。但是，我在 jQuery 中做了一个示例。 http://jsfiddle.net/peduarte/RnKmE/3/

【讨论】：

不起作用 - 如果 #one 的内容太长，它将消失在 #two jsfiddle.net/RnKmE/2 后面
我也这么想 - 不能只用 css 来完成。你能得到的最接近的是jsfiddle.net/RnKmE/4
我们的想法是你可以在相反的方向上这样做，但不能从下到上。我从来没有看到过，因为我在这里问。

【解决方案2】：

在纯 CSS 中执行此操作的方法是在您的示例中仅添加一行代码：

#one { height:calc(100% - 200px);}

你就完成了:)

Example

【讨论】：

【解决方案3】：

这样写：

#one { 
  position: absolute; 
  width: 100%; 
  background: red; 
  top: 0; 
  bottom:200px
 }

http://jsfiddle.net/sj2AD/7/

【讨论】：

不起作用 - 如果#one 的内容太长，它会在#two 后面消失
谢谢，但如果您尝试移动 div#two，第一个 (div#one) 不会改变其高度。我认为我正在寻找的东西不能用 CSS 来完成。

【解决方案4】：

Demo

 body,html{ height:100%; }
 #one { height:100%; }

【讨论】：

谢谢，但#one 落后于#two。 div 之间不能隐藏。

【解决方案5】：

看看这个，我想这就是你要找的东西：

jsfiddle.net/mcverde/XZ253/

该脚本仅用于动态添加内容。

#uno {
width: 150px;
background-color: rgba(244, 244, 244, 0.59);
font-family: sans-serif;
padding: 5%;
bottom: 10%;
position: absolute;
border: 1px solid #4E4E4E;
    max-height:150px;
    overflow:scroll;
    overflow-x:hidden;
}

#enviar{
width:300px;
    height:100px;
cursor:pointer;
}

【讨论】：

【解决方案6】：

我意识到这是一个非常古老的问题，您一定在很久以前就找到了答案，但我刚刚找到它并使用 Flex 尝试了一下。您需要做的就是在 flex 中显示一个容器 div。

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.container #one {
  background: red;
  flex-grow: 1;
}

.container #two {
  background: yellow;
  flex-basis: 200px;
}

https://jsfiddle.net/bksLtm06/

【讨论】：