child#2 div 调整到可用的垂直空间，具体取决于 child#1 的高度

发布于 2024-10-20 19:17:54 字数 1220 浏览 7 评论 0原文

我想使用 HTML5 / CSS3 执行以下操作（完全兼容浏览器会很好，但不是完全必要 - 到目前为止我正在使用 firefox 4b12、safari 和 chrome 进行测试）：

我有以下 html 结构：

<div id=contentwrapper>
  <aside>  
   <div id=child1></div>
   <div id=child2></div>
  </aside>
  (<div id=maincontent></div>)
</div>

我想要什么要做的事情如下：

contentwrapper 设置位置固定，顶部 20，底部 20px（= 使用固定页眉和页脚之间的所有空间）。

aside 设置为 100% 高度（使用内容包装器的所有空间！）

child1 具有可变内容（可能通过用户交互的 CSS 或 DOM 操作进行更改），因此它的高度设置为 auto 以相应地调整其高度。

child2 也有可变的内容。但我希望这个 div 使用旁边留下的所有可用垂直空间，并且未被 child1 占用。如果它的内容需要更多空间，则有一个溢出：自动在必要时制作滚动条。

整个列后面是向右浮动的主要内容区域。但这应该与我的问题无关。

到目前为止我尝试过的：

我无法将child2的高度设置为自动或100％或固定值（可能太大，没有滚动条，不知道用户窗口高度，...）。

我无法使用position:fixed 和top+bottom 值，因为这不会查看child1，而是相对于旁边进行渲染。

我无法使用 display:table，因为元素确实具有不适用于表格单元格的边框/格式。

我希望你理解这个问题，也许有一个聪明的解决方案...

编辑：这是我的问题的屏幕截图：

在视图 1 中，您可以看到当视口足够高时会发生什么。

在视图 2 中，没有足够的空间，child2 在页脚下方滑动...

我想要的是 child2 获取其可以获得的所有高度，但滚动其内容。

感谢您的帮助

塞巴斯蒂安

原文

I'd like to do the following with HTML5 / CSS3 (full browser compliance would be nice, but not totally necessary - I'm testing with firefox 4b12, safari and chrome so far):

I have the following html structure:

<div id=contentwrapper>
  <aside>  
   <div id=child1></div>
   <div id=child2></div>
  </aside>
  (<div id=maincontent></div>)
</div>

What I want to do is the following:

contentwrapper is set position fixed, top 20, bottom 20px (= use all space between a fixed header and footer).

aside is set to 100% height (use all space of content wrapper!)

child1 has variable content (potentially changed by CSS- or DOM manipulation by user interaction), so it's height is set to auto to adjust it's height accordingly.

child2 has also variable content. but I want this div to use all available vertical space that is left within the aside and that is not occupied by child1. If it's content needs more space, there is a overflow:auto to make a scrollbar if necessary.

The whole column is followed by a main content area that is floated right. this should not be relevant to my problem though.

what I tried so far:

I can't set child2's height to auto or 100% or a fixed value (could be to large, no scrollbar, don't know users window height, ...).

I can't use position:fixed and top+bottom values, as this does not looks at child1, but renders relatively to aside.

I can't use display:table, as the elements do have borders/formattings that don't apply to table cells.

I hope you understand the problem, and maybe have a smart solution ...

Edit: here is a screenshot of my problem:

In view 1 you can see what happens at the moment when viewport is high enough.

In view 2, there is not enough space, and child2 slides down under the footer ...

what I'd like is to that child2 takes all it can get in height, but scrolls its content.

thanks for your help

sebastian