Question

在此链接上：testing v1

你可以找到我在bootstrap中创建的示例页面。没什么难的，但我有一个关于父母和孩子关系的小问题。如您所见，内容会破坏父级大小。我只是想知道为什么我在所有班级使用高度和最小高度100％。有什么想法吗？

Answer 1

实际上，使.col-lg-6.sidebar的高度低于其子级（.testowo）的原因是height: 100%。

.sidebar {
    text-align: center;
    background-color: #F00;
    background-image: url("../images/background.png");
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: inherit;
    /* height: 100%; */ //remove this line
    min-height: 100%;

如果您希望父级的高度调整为其子级的内容，请不要设置其高度。您可能认为它仍然会中断，但不会，它只是使用的background-image会居中。父母的身高将根据孩子的内容进行调整。

发生的事情是所有div都有height: 100%所以它是这样的：

html - ＆gt;它的初始高度是浏览器窗口的高度。

body - ＆gt; height: 100%使其高度为htmls的高度，即浏览器的窗口高度。

.main-part - ＆gt; height: 100%使其高度为body的高度。同样，它将是您浏览器的窗口高度。

.container-fluid - ＆gt; height: 100%，与body和.main-part相同。

.row - ＆gt; height: 100%，与body，.main-part和.container-fluid相同。

.col-lg-6.sidebar - ＆gt; height: 100%，同样的。因此，它将是您浏览器的窗口高度，内容将打破它。你在这里设置一个固定的高度，它是100％，但是如果你通过给予height: 100%你将通过设置高度等于html的高度，那么你将浏览器的窗口高度。通过删除height:100%声明或设置height: auto，让它适应其内容。

此外，您无需在height: 100%中设置.testowo。没有区别。

.testowo {
    width: 200px !important;
    position: relative;
    /* height: 100%; */ //remove this since it is useless.
}

注意：请记住，在CSS中使用%值时，它会引用父级而不是子级。将height: 100%设置为元素将使高度等于其父级的高度，而不是孩子的高度。使用height: auto来调整其内容。

Bootstrap - 适合父级身高/儿童/内容

1 个答案: