100％身高无法正常工作 - 身高只有浏览器窗口的高度，而不是内容

我喜欢认为我对CSS很好，但这个问题让我发疯。100％身高无法正常工作 - 身高只有浏览器窗口的高度，而不是内容

我试图让3列100％的身高。前两列向左浮动，第三列不浮起，仅余量。在清除浮游物的所有3列周围都有一个包装。 HTML/BODY标签有100％的高度。据我所知，如果所有的父容器都有100％的高度，它应该可以工作。包装应该与最高内容块（第三列）一样高，所以前两列应该也很高，使用100％的高度。

问题是，包装，因此身体标记，有一个高度等于浏览器窗口的高度。由于某些原因，它不会读取中间列的内容高度。这可能是一个超级愚蠢的简单解释，我只是想念它。

不想溢出黑客。不能做虚拟列。我不明白为什么这不能使用CSS规范的高度。

如果我把像素量放在包装div上，比如2000px的高度，前两列就像我想要的那样填充高度。为什么不工作？

HTML：

<body> 
    <div class="wrapper clearfix"> 

     <section class="sidebar-news clearfix"></section> 

     <section class="black-bar-vertical"></section> 

     <section class="section-main-content event-detail"></section> 

    </div> 
</body>

CSS：

html { 
    height: 100%; 
} 

body { 
    background-color: #333; 
    height: 100%; 

    * { 
     box-sizing: border-box; 
    } 
} 

.wrapper { 
    height: 100%; 
    position: relative; 
    margin: 0 auto; 
} 

.sidebar-news { 
    float: left; 
    width: 300px; 
    height: 100%; 
    min-height: 100%; 
    background-color: @site-color-yellow; 
    margin-right: -25px; 
    padding: 76px 40px 20px 20px; 
} 

.black-bar-vertical { 
    position: relative; 
    float: left; 
    width: 116px; 
    background: url("@{img-path}/black-bar-vertical.png") repeat-y top center; 
    min-height: 100%; 
    height: 100%; 
    text-align: center; 
    margin-right: -25px; 
    padding-top: 81px; 
    z-index: 50; 
} 

.section-main-content { 
    width: 580px; 
    background-color: #FFF; 
    padding-top: 55px; 
    padding-left: 10px; 
    margin-left: 360px; 
}

截图：

Top & Bottom of page

The height of the two columns in dev tools

编辑：

发现这篇文章，这基本上是相同的问题。 html body is smaller than its contents

如果我更改身体的高度属性为最小高度，包装成为内容的全高度，耶！但是，前两列的100％高度根本不起作用。

就像我原先想象的那样......如果在元素上设置了100％高度，它会冒起dom，并继承父容器的高度。如果该父容器具有100％的高度，则它继承父级的父级的高度等。这按预期工作。但是，当它触及身体标签时，身高为100％时，它读取的是浏览器窗口的100％高度。这是默认行为，这对我没有意义。如果你脱掉身体的高度，它包含所有的内容，但是包装div可以查看身体的高度定义，因为身体没有设置高度，所以什么都不会。

看起来像这个特定的情况是不是真的可能没有使用flexbox，表格布局，JavaScript或绝对定位的元素。

来源

2016-03-04 Stephen Starzyk

做一个jsfiddle也许？通过混淆代码，我更容易找到解决方案。 –

https://jsfiddle.net/p6o5ph9j/ - 如果将像素高度添加到包装div，前两列将填充高度。但100％的高度，它不一样。身体/包装不应该是100％的内容，而不是浏览器窗口？ –

Flexbox fo-sho！

.wrapper { 
    min-height: 100vh; 
    width: 100vw; 
    display: flex; 
    align-items: stretch; 
} 
.sidebar-news { 
    min-height: 100vh; 
    flex-grow: 1; 
} 

.black-bar-vertical { 
    min-height: 100vh; 
    flex-grow: 1; 
} 

.section-main-content { 
    min-height: 100vh; 
    flex-grow: 1; 
}

看看这个为参考 - Flexbox CSS Tricks

来源

2016-03-04 02:02:01

谢谢克拉克 - 绝对是一种选择，但我试图支持IE9。这并不是说我不能使用flexbox，只是我记得几年前做过这种100％高度的东西，它运作良好，现在不行，所以我想知道我错过了什么。 –

我决定做人造列的组合，以获得第一和第三列的背景颜色，然后绝对定位的第二列，我可以舒展使用顶部全高：0，底部：0.

如果任何人仍然可以解决这个问题，我很想听听它是如何完成的！

来源

2016-03-04 16:31:40

100％身高无法正常工作 - 身高只有浏览器窗口的高度，而不是内容

回答

相关问题