css calc和min-height不能正常组合 [英] css calc and min-height can not team up properly

问题描述

我建立一个动态高度的布局（大多数人都这样做）。我一直在寻找一段时间，但没有找到类似的情况下我的。
所以这里是我的简化代码：

i'm building a layout that has dynamic height (as most people do). i've been searching for a while but have not found similar case with mine. so here it is, my simplified code:

html：

<div id="body"><div id="content">
content
</div>
</div>
<div id="footer">
    abc
</div>

css：

#footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #ddd;
}
#body{
    padding: 60px 50px 70px 50px;
    position: relative;
    min-height: calc(100% - 130px);
}
#content{
    font-family: verdana;
    margin-left: 200px;
    border-left: 5px solid #ddd;
    padding: 0 0 0 10px;
    min-height: 100%;
    min-width: 500px;
}
body{
    margin:0;
    overflow-y:scroll;
    height:100%;
    position:relative;
}
html{
    height:100%;
}

问题是当我使用该代码时，内容高度未正确计算结果看起来像这个小提琴，而我想做的是当内容很短时，它应该看起来像这，当内容很长时，它应该看起来像 this 。

the problem is when i use that code, the content height is not calculated properly and the result look like this fiddle while what i'm trying to do is when the content is short, it should look like this and when the content is long, it should look like this.

如果我更改 min -height 到 height ，当内容很短时，我得到我想要的，但是当内容很长时，我得到这个恼人的布局

if i change the min-height to height, when the content is short, i get what i wanted, but when the content is long, i get this annoying layout

看起来当没有指定高度属性（使用 min-height ）时，calc 不能读取高度属性，但如果 height 指定，那么我不能获得动态高度，是否有任何其他解决方案来实现这一点？

it seems calc cannot read the height attribute when it is not specified (using min-height), but if the height is specified, then i can't get dynamic height, is there any other solution to achieve this?

PS：
我想要做的是使 #content 的边框根据其内容最小高度的页面高度

PS: what i'm trying to do is to make the border of #content stretches according to its content with minimum height of a page height

注意：

另一个奇怪的事实是，实际上我当前的代码是使用最新的chrome和IE，但有最新的firefox和歌剧这个问题。我试图使用jsfiddle重现问题，对我的敬畏，所有的浏览器有相同的问题，我已经包括所有相关的html和css（复制生成的html和css）到jsfiddle只找到我的代码不工作，我很困惑

another strange fact is, actually my current code is working on latest chrome and IE, but have this problem on latest firefox and opera. i was trying to reproduce the problem using jsfiddle, and to my awe, all of the browsers have the same issue, i have included all the related html and css (copy the generated html and css) to jsfiddle only to find that my code is not working at all, i'm very confused

推荐答案

为什么不使用弹出框？它听起来像你想要一个粘性页脚 - 也就是说，当内容不是很高时，页脚位于视口的底部，但当内容超过视口高度。这与圣杯设计非常相似。这里是一个不使用JavaScript的HTML5 + CSS3解决方案：

Why not use flex boxes? It sounds like you want a sticky footer - that is, the footer is at the bottom of the viewport when the content is not very high, but it is at the bottom of the content when the content exceeds the viewport height. This is very similar to the holy grail design. Here is an HTML5+CSS3 solution that does not use JavaScript:

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}
html {
    /* make sure we use up the whole viewport */
    width: 100%;
    height: 100%;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body {
    /* make the body a vertical flex container */
    /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
    display: flex;
    flex-direction: column;
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100%; /* this helps with the sticky footer */
}
main {
    /* Allow the content to grow but not shrink */
    flex-grow: 1;
    flex-shrink 0;
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
}
footer {
    /* do not allow the footer to shrink */
    flex-shrink: 0;
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
}

<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

如果您不想将代码复制到自己中，请我做了为您。如果您希望支持旧版浏览器，则可能需要使用部分供应商前缀 - 弹出框相对较新的这篇文章的写作。

If you don't want to copy the code into a fiddle yourself, I've done that for you. You may need to use some vendor prefixes if you want to support older browsers - flex boxes are relatively new as of the writing of this post.

这篇关于css calc和min-height不能正常组合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！