从下到上垂直展开DIV

发布于 2024-12-19 06:08:05 字数 755 浏览 1 评论 0原文

我想从下到上垂直扩展 DIV，而不使用百分比或函数（仅 css）。我有两个 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>

您可以将代码放在这里，看看我得到了什么< /a>

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

任何帮助将不胜感激，感谢您的时间！友好，Chumpocomon

原文

I would like to expand a DIV vertically from the bottom to the top without using percents or functions (only css). I have two div but only the second one has a defined height, so I have to fix the rest of the space with my first div.

Here is my code:

<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

The problem is that the red div stay on the top :S

Any help will be appreciated, thanks for your time!
Friendly, Chumpocomon

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

天涯沦落人 2024-12-26 06:08:05

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

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

*编辑*

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

回复收藏 0 原文

执妄 2024-12-26 06:08:05

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

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

就完成了:)

示例

The way to do this in pure CSS is to add only one line of code to your example:

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

and you're done :)

Example

回复收藏 0 原文

中性美 2024-12-26 06:08:05

像这样写：

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

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

Write like this:

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

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

回复收藏 0 原文

帥小哥 2024-12-26 06:08:05

演示

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

Demo

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

回复收藏 0 原文

奢欲 2024-12-26 06:08:05

看看这个，我想这就是您要找的：

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

check this out, I think it is what you´re looking for:

jsfiddle.net/mcverde/XZ253/

The script is only to add content on the fly.

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

回复收藏 0 原文

凑诗 2024-12-26 06:08:05

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

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

I realize this is a SUPER old question and you must have found an answer ages ago, but I just found it and took a stab at it using Flex. All you need to do is have a container div displaying in flex.

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

回复收藏 0 原文

~没有更多了~