CSS calc和min-height不能很好地配合使用。

Question

CSS calc和min-height不能很好地配合使用。

6

我正在构建一个具有动态高度的布局（像大多数人一样）。我已经搜索了一段时间，但没有找到与我类似的情况。所以这是我的简化代码：

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 fiddle，而我的目的是当内容较短时，它应该看起来像this，当内容较长时，它应该看起来像this。

如果我将min-height更改为height，当内容较短时，我得到了我想要的结果，但当内容较长时，我得到了this annoying layout 似乎calc无法读取未指定高度属性（使用min-height）的高度属性，但如果指定了height，则无法获得动态高度，是否有其他解决方案可以实现这一点？

PS: 我想做的是使#content的边框根据其内容自动延伸，最小高度为页面高度

注意:

另一个奇怪的事实是，实际上我的当前代码在最新的Chrome和IE上运行良好，但在最新的Firefox和Opera上出现了问题。我试图使用JSFiddle复制问题，但令人惊讶的是，所有浏览器都有同样的问题。我已经将所有相关的HTML和CSS（复制生成的HTML和CSS）包含在JSFiddle中，只发现我的代码根本不起作用，我很困惑。

- am05mhz

2个回答

0

根据我们的对话，您想要设置min-height以填充视口并留出页脚空间，但随着内容增长，内容div也应该随之增加，将页脚向下推。

* { box-sizing: border-box } 
html,body { height: 100%; padding: 0; margin: 0 }
#content { min-height: 90%; outline: 1px solid blue } 
#footer { background: gray; height: 10%; }

只需要使用百分比设置min-height即可。我正在使用border-box盒模型，这种模型更容易使用，但不是必需的，如果您关心旧版IE的话。

fiddle

- helion3

那就是关键点，但它没有正常工作，你点击了我提供的链接吗？顺便说一下，谢谢。 - am05mhz

谢谢您的回答，但这会带来另一个问题，因为页脚高度取决于内容长度。 - am05mhz

你的意思是页脚高度也需要可调节吗？听起来你需要使用JavaScript来计算高度。 - helion3

不，我的意思是你的解决方案会使页脚高度随内容变化而改变。比如说，总页面高度为100像素，则10%的页脚高度为10像素；当总页面高度为200像素时，页脚高度为20像素，这不是我想要的。 - am05mhz

好的，我原本希望使用 calc 和 min-height 来解决我的问题，但现在看来它们似乎有些错误，所以当内容较短时，我必须使用 JS 应用 height。无论如何，还是谢谢你。 - am05mhz

显示剩余5条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LB-- · Accepted Answer

为什么不使用flex boxes呢？听起来你想要一个粘性页脚，也就是说，当内容不太高时，页脚在视口底部，但当内容超过视口高度时，页脚在内容底部。这与圣杯布局非常相似。这是一种HTML5+CSS3解决方案，不需要使用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>

如果您不想自己将代码复制到fiddle中，我已经为您做好了。如果您想要支持旧浏览器，则可能需要使用一些供应商前缀 - 在编写本文时，Flexbox相对较新。