Question

我觉得这是一个非常基本的问题，但我无法找到一个好的解决方案

我怎么能有

标题：始终位于顶部
页脚：始终在底部
内容：正下方标题。它应该在标题之后开始，如果内容太多，它应该是可滚动的。

在一个特定的div中？不是整个屏幕

我正在尝试使用弹性框，并且当content中有很多内容但content中只有少数内容居中时会正常工作:(。我希望它最顶层。

这是我到目前为止所做的： http://fiddle.jshell.net/nacho4d/ddv7ytkf/1/

HTML：

<div id="main">
    <div style="background-color:lightblue;" class="header">Header - height is variable but just a couple of lines at maximum. Should not overflow</div>
    <div style="background-color:khaki;" class="content">
        <div>
          Content - height is variable. There could be a lot of content here so its overflow should be auto.<br/>
          "Lorem ipsum ... Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? "
        </div>
    </div>
    <div style="background-color:pink;" class="footer">Footer</div>
</div>

的CSS：

#main {
    width: 400px;
    height: 250px;
    border: 1px solid #c3c3c3;

    display: flex;
    display: -webkit-flex;

    -webkit-justify-content: space-between;
    justify-content: space-between;

    -webkit-flex-direction: column;
    flex-direction: column;
}
.header {
}
.content {
    overflow:auto
}
.footer {
}

解答：

基本上和@Abhitalks一样，我刚刚添加了webkit供应商前缀：http://fiddle.jshell.net/nacho4d/ddv7ytkf/11/它很棒！

Answer 1

您忘记了对孩子的flex规则。

.header {
    flex: 0 0 auto; /* do not grow or shrink, keep the flex basis auto */
}
.content {
    flex: 1 1 auto; /* grow or shrink as appropriate */
    overflow:auto
}
.footer {
    flex: 0 0 auto; /* do not grow or shrink, keep the flex basis auto */
}

小提琴：http://fiddle.jshell.net/ddv7ytkf/5/

Answer 2

http://fiddle.jshell.net/ddv7ytkf/8/

这是你的意思吗？（见小提琴）将更多文本粘贴到内容字段中，如果它大于您设置的任意主高，则应滚动。

CSS

 #main {
    width: 400px;
    border: 1px solid #c3c3c3;
    overflow-x: hidden;
    display: block;
    overflow-y: scroll;
}
.wrapper {    
    height: 150px; 
}
.header {
    top: 0;
    height: auto;
}
.content {
    position:relative;
    overflow:visible;
}
.footer {
    bottom: 0;
    position: relative;
}

HTML

<div id="main">
    <div class="wrapper">
        <div style="background-color:lightblue;" class="header">Header - height is variable but just a couple of lines at maximum. Should not overflow</div>
        <div style="background-color:khaki;" class="content">
        <p>Content - height is variable. There could be a lot of content here so its overflow should be Content - height is variable. There could be a lot of content here so its overflow should be Content - height is variable. There could be a lot of content here so its overflow should be Content - height is variable. There could be a lot of content here so its overflow should be Content - height is variable. There could be a lot of content here so its overflow should be</p>
    </div>
        <div style="background-color:pink;" class="footer">Footer</div>
    </div>
</div>

Answer 3

.content { flex-grow: 1; }应该可以获得您所追求的结果，但首选方法是使用flex属性，该属性采用三个参数，这些参数是flex-grow的简写，{{ 1}}和flex-shrink（按此顺序）。

第二个和第三个是可选的，所以如果你只设置一个参数（flex-basis），它与写flex: 1;

相同

默认值为flex-grow: 1;，因此撰写flex: 0 1 auto;会为您提供与flex: 1;相同的结果（在本例中）。但是flex: 1 1 auto;的行为有些奇怪的是，虽然flex和flex: 1;都给你相同的结果，flex: 1 1 auto;和flex: auto;却没有（顺便提一下， flex: auto 1 auto;也会为您提供您所追求的结果，flex: auto;不会。这是因为flex: auto 1 auto;“智能地”设置其他两个值的方式，所以当你使用这个速记时要小心意外的结果。

因此flex或.content { flex: 1; }应该做到这一点，只要注意更改.content { flex: auto; }和flex-shrink后这些值可能会有所不同。

标题/内容/页脚div在特定div中？

3 个答案: