Question

我的代码存在小问题。使用少量文本看起来非常好（firefox / chromium - 窗口最大化）：

CSS：

* { margin: 0; padding: 0; }

html, body { height: 100%; max-height: 100%; overflow: hidden; width: 100%; }

body > div:last-child > div { width: 100%; }

body{
display: flex;
flex-direction: column;
}

body > div:first-child{
display: flex;
flex-grow: 0;
height: auto;
}

body > div:first-child > div{flex-grow: 1;}

body > div:last-child{
align-items: center;
background-color: black;
color: white;
display: flex;
flex-grow: 1;
overflow: auto;
}

HTML：

<body>
<div>
<div style="background-color: red;">Left</div>
<div style="background-color: green; text-align: center;">Center</div>
<div style="background-color: blue; text-align: right;">Right</div>
</div>
<div>
<div style="text-align: center;">
Start<br>
Test<br>Test<br>Test<br>Test<br>Test<br>
Test<br>Test<br>Test<br>Test<br>Test<br>
Test<br>Test<br>Test<br>Test<br>Test<br>
Test<br>Test<br>Test<br>Test<br>Test<br>
Test<br>Test<br>Test<br>Test<br>Test<br>
End
</div>
</div>
</body>

但是当我添加：“测试（...）”x2 - 我有高度问题，默认设置为自动。

这是 JSFIDDLE 。

以下是带有x2文字的 JSFIDDLE - 这是我的问题。

感谢您的帮助。

Answer 1

你使用了很多不必要的CSS代码。请参阅 example 。

我正在使用此CSS来对齐菜单div：

float: left;
width: 33%;

或者您可以尝试将z-index: 3;添加到body > div:first-child > div 并将height: 20px;添加到您的菜单中。

<强> Example 2

<强>更新

您可能需要尝试以下方法： Example 3

Answer 2

我不知道为什么添加flex-basis值可以解决问题，但确实如此：

http://jsfiddle.net/Sd8qm/5/

* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    width: 100%;
}
body > div:last-child > div {
    width: 100%;
}
body {
    display: flex;
    flex-direction: column;
}
body > div:first-child {
    display: flex;
    flex: 0 auto;
    height: auto;
}
body > div:first-child > div {
    flex-grow: 1;
}
body > div:last-child {
    align-items: center;
    background-color: black;
    color: white;
    flex: 1 0 0; /* here */
    overflow: auto;
}

此外，不要将元素设置为display: flex，除非您确实需要它们作为弹性容器。

Answer 3

顶线会缩小，因为即使您没有指定它，body > div:first-child 可缩小，因为flex-shrink的默认值为1

添加flex-shrink:0，您将解决问题

演示 http://jsfiddle.net/kN2x4/13/

无法正确设置Flexbox div

3 个答案: