纯CSS最小化高度标题，绝对定位DIV内最大化身高

I have an HTML editor widget that I want to appear within an absolutely positioned, fixed-size DIV. However, I don't know the absolute size of the DIV beforehand, and it may change, like if the user resizes the window.

我有一个HTML编辑器小部件,我希望在一个绝对定位的固定大小的DIV中出现。但是,我事先并不知道DIV的绝对大小,并且可能会改变,就像用户调整窗口大小一样。

The editor, naturally, has controls and an editable area. Each has their own DIV. I want the controls to take up as much space as they need to, and the editable area to fill the rest of the space.

当然,编辑有控件和可编辑区域。每个人都有自己的DIV。我希望控件占用尽可能多的空间,以及可编辑区域来填充剩余的空间。

If I use tables, this is extremely easy to achieve. I just turn off borders and padding and margins, and throw each DIV into a cell in its own row, and maybe fiddle with max-height on the controls DIV. This is what it looks like:

如果我使用表格,这很容易实现。我只是关闭边框和填充和边距,并将每个DIV抛入自己行中的单元格中,并且可能在控件DIV上调整最大高度。这就是它的样子:

Base table http://img407.imageshack.us/img407/8435/table1.png

基表http://img407.imageshack.us/img407/8435/table1.png

Same table with window resized another way http://img264.imageshack.us/img264/6438/table2p.png

窗口调整大小的另一个表格另一种方式http://img264.imageshack.us/img264/6438/table2p.png

Notice the editable section taking up as much space as possible without causing scrollbars to appear.

请注意,可编辑部分占用尽可能多的空间而不会导致滚动条出现。

I've monkeyed with various CSS examples and nothing seems to work without having some JavaScript run on resize to make the editable DIV be the height of the parent minus the height of the controls.

我已经熟悉了各种CSS示例,如果没有在调整大小上运行一些JavaScript就可以使得可编辑的DIV成为父级的高度减去控件的高度。

Of course, I can make the parent DIV have display:table and the child DIVs wrapped in display:table-row DIVs and themselves have display:table-cell, but...well...in that case it's exactly the same as using TABLE, TR, and TD, but ten times more ugly for the sake of CSS purity. (Why bother?)

当然,我可以让父DIV显示:table和子DIV包裹在显示中:table-row DIVs和他们自己都有display:table-cell,但是......好吧......在这种情况下它完全一样使用TABLE,TR和TD,但为了CSS纯度而丑陋十倍。 (何必?)

So, without directly using display:table & friends, nor TABLE/TR/TD, nor JavaScript, is there a pure CSS way of doing this? In other words, is there a pure CSS way of saying, DIV1, take up as little vertical space as possible, and DIV2, take up the remaining vertical space within the parent element?

所以,如果没有直接使用display:table&friends,TABLE / TR / TD和JavaScript,是不是有一种纯粹的CSS方式呢?换句话说,有一种纯粹的CSS方式,DIV1占据尽可能小的垂直空间,而DIV2占用父元素中剩余的垂直空间吗?

If there isn't, I'm quite ready to stop subscribing to the "pure CSS" mentality. It's caused me enough grief with very little developer or end-user benefit.

如果没有,我已经准备好停止订阅“纯CSS”的心态。这给我带来了足够的悲痛,只有很少的开发人员或最终用户的利益。

4 个解决方案

#1

You only have so many options. If you want table-like behavior without using a table then use display:table and give yourself the option of changing your mind later. That way, while uglier in the markup (subjective), makes more sense to me: you'll end up with a few more elements, but you won't be locked in to a specific layout.

你只有很多选择。如果你想在不使用表的情况下使用表格式行为,那么使用display:table并给自己选择以后改变主意。这样,虽然标记中的丑陋(主观),对我来说更有意义:你最终会得到更多的元素,但你不会被锁定在特定的布局中。

If you don't care about the markup then pull the trigger and use a table. This will be easier in the short-term.

如果您不关心标记,请拉动扳机并使用表格。这在短期内会更容易。

My question: If you don't want to use JavaScript, how will you be implementing your editor controls?

我的问题:如果您不想使用JavaScript,您将如何实现编辑器控件?

4 个解决方案

#1

更多相关文章

随机推荐