Question

我想在不使用百分比或函数（仅限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

感谢您的帮助，感谢您的帮助！友善，Chumpocomon

Answer 1

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

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

<强> * 修改 *

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

Answer 2

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

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

你已经完成了：）

Example

Answer 3

像这样写：

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

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

Answer 4

Demo

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

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

从底部到顶部垂直展开DIV

5 个答案:

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