即使未设置高度也会出现垂直滚动条 [英] Vertical scroll bar appearing even when height is not set
问题描述
如果您以html格式保存文件，则会出现垂直滚动条。由于
的高度
< div class =tabDataid =tab3datastyle =visibility：visible;> ;
未设置，应该不会自动展开以适合所有内容？
< html dir =ltrxmlns =http://www.w3.org/1999/xhtml>
< head>
< style type =text / css>
.tabData
{
width：100％;
background-color：Yellow;
overflow：auto;
}
< / style>
< / head>
< body>
< div class =tabData>
< div style =height：390px; background-color：Green;>
< br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br />
< / div>
Hello
< / div>
< / body>
您有一个父容器 div.tabData ，其高度由子元素的总高度决定，其中有两个，内部<$ c $
内部 div / code>的高度为390px，Hello行占用大约1.5em。因此，具有黄色背景的父元素只是足够大以包围390px内部div和一行文本。
如果添加足够的内容到内部div ，文本将最终流动到具有绿色背景的内部div之外。这是浏览器在默认情况下工作的方式，它们试图使文本可见，不管是什么。
但是，就父元素而言，基于390px + 1行文本高度。当文本溢出固定高度的子元素时，浏览器不会重新计算块元素的高度。
如果继续向内部div添加更多文本，在父元素中的任何文本上，最后，它将溢出父容器并导致垂直滚动条出现，因为您在父元素上设置 overflow：auto 。
另一方面，你是否没有修正内部div的高度，你会得到预期的行为，内部div扩展以包含所有的内容，父div扩展为包含内部div和一行文本。
示例
如果您尝试以下小提琴，请 http://jsfiddle.net/audetwebdesign/s3bnJ/，并调整水平宽度，你可以看到文本从内部div流出内部div并进入父div，最终你会看到滚动条出现。
If you save the file below in html format, you will that a vertical scroll bar appears. Since the height for
<div class="tabData" id="tab3data" style="visibility: visible;">
is not set, shouldn't it automatically expand to fit all the contents?
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.tabData
{
width: 100%;
background-color: Yellow;
overflow: auto;
}
</style>
</head>
<body>
<div class="tabData">
<div style="height: 390px; background-color: Green;">
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
</div>
Hello
</div>
</body>
You have a parent container div.tabData whose height is determined by the total heights of the child elements, of which there are two, the inner <div> and the anonymous block that contains the word "Hello".
The inner div has a height of 390px and the "Hello" line takes up about 1.5em. Therefore, the parent element with the yellow background is just big enough to enclose the 390px inner div and the one line of text.
If you add enough content to the inner div, the text will eventually flow outside of the inner div that has the green background. This is how browsers work by default, they try to make the text visible no matter what.
However, as far as the parent element is concerned, it has the right height based on 390px + height-of-1-line-of-text. Browsers will not recalculate a block element's height when text overflows out of a fixed height child element.
If you continue to add more text to the inner div, it starts to flow over any text in the parent element, and eventually, it will overflow the parent container and cause a vertical scroll bar to appear since you set overflow: auto on the parent element.
On the other hand, is you had not fixed the height of the inner div, you would get the expected behavior, the inner div expands to contain all its content, and the parent div expands to enclose both the inner div and the one line of text.
Example
If you try the following fiddle, http://jsfiddle.net/audetwebdesign/s3bnJ/, and adjust the horizontal width, you can see the text from the inner div flow out of the inner div and into the parent div, and eventually, you will see the scroll bar appear.
这篇关于即使未设置高度也会出现垂直滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
