1

我有一个 vbox，里面有描述。它有一种溢出的风格：自动。如果我在 vbox 上没有设置高度，则它太短并且使用滚动条剪切内容。它变成大约 50 像素，需要 150 像素才能显示所有内容。如果我设置了一个明确的高度，它就会变成那个高度，但我不想设置一个明确的高度。如果我设置了最大高度，它仍然太短并且使用滚动条剪切内容。

我希望它不会切断任何东西，除非高度超过 400 像素的最大高度。如何才能做到这一点？

这是标记：

<vbox flex="1" align="center">
   <image src='chrome://dfsdf/skin/sdf.svg' width='100px' />
   <label class="header" value="An Exception Has Occurred"/>
   <!-- the following should be as tall as needed as with no scroll bars long as it is less than 200px, if longer than 200px, make it 200 and add scroll bars -->
   <vbox flex="1" class="ErrorMessageWrapper">
      <description id="ExceptionDescription">
         The exception should appear here.
      </description>
   </vbox>
   <label value="Trace"/>
   <!-- the following should be as tall as needed as with no scroll bars long as it is less than 400px, if longer than 400px, make it 400 and add scroll bars -->
   <vbox flex="1" class="ErrorMessageWrapper">
      <description id="ExceptionTrace">
         The exception trace should appear here.
      </description>
   </vbox>
   <hbox  class="FieldWrapper" pack="right" align="right" flex="0">                   
         <button label="Try Again" class="Button" oncommand="RetryConnection();" />
   </hbox>
</vbox>

CSS：

.ErrorMessageWrapper{
   border:1px solid #070707;
   background:#141414;
   padding:20px;
   padding-bottom:11px;
   margin-bottom:20px;
   width:700px;
   overflow:auto;
   max-height:400px; /* Does nothing! */
}
4

2 回答 2

1

XUL 的行为与 HTML 不太一样。我不知道有什么方法可以在不使用一些 Javascript 技巧的情况下达到相同的效果，类似于：

addEventListener("load", function() {
    // After the text has been set...
    let box = document.getElementById("ExceptionTraceWrapper");
    if (box.boxObject.height > 400) {
        box.style.height = "400px";
        box.style.overflow = "auto";
    }
});
于 2013-10-25T07:30:12.520 回答
0

你试过使用min-height:200px;吗？即使里面的内容更小，它也会强制元素具有至少 200px 的大小。

于 2013-10-24T13:56:16.720 回答