我无法使用CSS正确设置HTML元素的高度_Html_Css_Overflow

我无法使用CSS正确设置HTML元素的高度

html css

我无法使用CSS正确设置HTML元素的高度,html,css,overflow,Html,Css,Overflow,我的CSS：我的HTML： .reviewRow { clear:both; padding-top:0; margin-top:0; } .reviewBlock { float:left; height:100%; padding-top:0; margin

我的CSS：

我的HTML：

        .reviewRow 
        {    
            clear:both;
            padding-top:0;
            margin-top:0;
        }
        .reviewBlock 
        {
         float:left;
         height:100%;
         padding-top:0;
         margin-top:0;
         border-top: 1px solid #444; 
         border-left: 1px solid #444;
        }
        .reviewCaption
         {
             font: normal normal normal 6pt verdana;padding-left:0.03in;
         }
        .reviewText 
        {
            font: normal normal normal 8pt verdana;  
            height:20px; 
        }

上面的HTML是从我遇到问题的网页中排除的。它是动态生成的，因此里面的文本可能短，也可能长。通常情况下，我希望这将呈现一个30像素高的框，其中包含文本，除非文本太大，在这种情况下，框将展开以适合文本

问题是，当这个HTML出现在另一个页面中时，文本会从框中溢出。我不明白问题出在哪里。更复杂的是，如果我删除高度样式，它实际上会使长方体更高

我已经看过了。它清楚地表明，默认情况下，CSS溢出的值是可见的，在这种情况下，文本可能溢出，但在任何情况下我都不希望出现滚动条

我尝试过修改包含元素的CSS位置，但似乎没有任何效果

是什么导致了这里的问题

更新我已经找到了导致问题的原因！这是doctype声明！如果我从摘录的页面中删除doctype声明，它将呈现良好效果！为什么？

您正在指定div的高度，如果文本变得更明显，它将像一瓶水罐一样溢出容器；不要倒在小杯子里，所以你需要溢出：滚动；你也不想用它，你必须让你的身高：自动；这将根据其包含的文本增加框大小，最小高度为：30px；。。将元素放在这里对您没有帮助..您不需要滚动，您不需要自动调整容器的大小，而不是实际需要的大小

如果你想让你的文字像

<body>
<div style="HEIGHT: 30px" class=reviewRow>
    <div style="WIDTH: 125px" class=reviewBlock>
        <div id=reviewBeneficiaryType class=reviewText>This text is too big to fit inside a 30px height cell, so I want it to get bigger.
        </div>
    </div>
</div>
</body>

不如试试这个

------------------------------------------
| This is a pretty long long long long...|
------------------------------------------

您正在为div指定高度，如果文本变得更明显，它将像一瓶水一样溢出容器；不要倒在小杯子里，所以你需要溢出：滚动；你也不想用它，你必须让你的身高：自动；这将根据其包含的文本增加框大小，最小高度为：30px；。。将元素放在这里对您没有帮助..您不需要滚动，您不需要自动调整容器的大小，而不是实际需要的大小

如果你想让你的文字像

<body>
<div style="HEIGHT: 30px" class=reviewRow>
    <div style="WIDTH: 125px" class=reviewBlock>
        <div id=reviewBeneficiaryType class=reviewText>This text is too big to fit inside a 30px height cell, so I want it to get bigger.
        </div>
    </div>
</div>
</body>

不如试试这个

------------------------------------------
| This is a pretty long long long long...|
------------------------------------------

如果您通常看到normalise.css或reset.css，它们会将html元素的高度设置为100%。。同样的做法也会奏效

text-overflow:ellipsis;

…检查这把小提琴。

如果您通常看到normalise.css或reset.css，它们会将html元素的高度设置为100%。。同样的做法也会奏效

text-overflow:ellipsis;

…检查这把小提琴。

试着给出最小高度：20px；最大高度：400px；查看文本

尝试给出最小高度：20px；最大高度：400px；to.reviewText

我发现问题在于其中一个页面缺少DOCTYPE声明。如果我在两个页面上使用相同的DOCTYPE声明，那么CSS的解释方式似乎完全相同

至于如何正确地编写CSS，如果我需要进一步的帮助，这将是一个单独的问题

谢谢你的帮助！我已对收到的所有答案进行了投票。

我发现问题在于其中一页缺少DOCTYPE声明。如果我在两个页面上使用相同的DOCTYPE声明，那么CSS的解释方式似乎完全相同

至于如何正确地编写CSS，如果我需要进一步的帮助，这将是一个单独的问题

谢谢你的帮助！我对收到的所有答案都投了赞成票。

为什么。reviewText的高度：20px？如果删除高度，默认情况下将为“高度：自动”。您只需设置reviewBlock的宽度就可以了。为什么。reviewText的高度：20px？如果删除高度，默认情况下将为“高度：自动”。您只需设置reviewBlock的宽度就可以了。我想你知道了什么。我试着将高度设置为“自动”，突然div的高度增加到1000像素左右。这似乎与一个固定高度的包含div的高度大致相同。我认为这个包含DIV的文件与这个问题有关。@Danielallengdon Height一定是被继承了。Kay，这里还有其他一些东西。我尝试从这个HTML中删除所有css高度属性。这会导致框扩展以包含文本，但所有边框都被弄乱和未对齐。这里的问题是，在这个摘录的真实页面上有许多div。每个用“reviewRow”类修饰的DIV中都有几个边界。@DanielAllenLangdon边界一定很混乱，因为您正在使用浮动，需要清除它们，请使用overflow:hidden；在.reviewRowWell中，仅此而已，无法确定您到底想要什么，请在此处发表您的评论，并将回复u nxt mrning

;我想你知道了什么。我试着将高度设置为“自动”，突然div的高度增加到1000像素左右。这似乎与一个固定高度的包含div的高度大致相同。我认为这个包含DIV的文件与这个问题有关。@Danielallengdon Height一定是被继承了。Kay，这里还有其他一些东西。我尝试从这个HTML中删除所有css高度属性。这会导致框扩展以包含文本，但所有边框都被弄乱和未对齐。这里的问题是，在这个摘录的真实页面上有许多div。每个用“reviewRow”类修饰的DIV中都有几个边界。@DanielAllenLangdon边界一定很混乱，因为您正在使用浮动，需要清除它们，请使用overflow:hidden；在.reviewRowWell中，仅此而已，无法确定您到底想要什么，请在此处发表您的评论，并将回复u nxt mrning；