Question

在这个例子中， http://jsfiddle.net/ch7n6/1833/

<section id="container" >
<header id="header" >This is a header</header>
<article id="content" >
    This is the content that
    <br />
    With a lot of lines.
    <br />
    With a lot of lines.
    <br />
    This is the content that
    <br />
    With a lot of lines.
    <br />
    <br />
    This is the content that
    <br />
    With a lot of lines.
    <br />
    <br />
    This is the content that
    <br />
    With a lot of lines.
    <br />
</article>
<footer id="footer" >This is a footer</footer>
</section>

＆＃34;文章＆＃34;根据屏幕可能会有很大差异，但是，在下面的情况下，如果有一个额外的div包装文章，它不再有效，有人可以建议处理这个问题吗？我问这个问题的原因是我正在使用Vuetify，所以div是嵌套的，我不能只是按照工作示例来解决我的问题。

<section id="container" >
<header id="header" >This is a header</header>
<div>
<article id="content" >
    This is the content that
    <br />
    With a lot of lines.
    <br />
    With a lot of lines.
    <br />
    This is the content that
    <br />
    With a lot of lines.
    <br />
    <br />
    This is the content that
    <br />
    With a lot of lines.
    <br />
    <br />
    This is the content that
    <br />
    With a lot of lines.
    <br />
</article>
</div>
<footer id="footer" >This is a footer</footer>
</section>

Answer 1

.flexbox {
 flex: 1 1 auto;
 overflow-y: auto;
}

在div元素中尝试此样式。

＆＃13;

html, body {
    height: 100%;    
}

.flexbox {
  flex: 1 1 auto;
  overflow-y: auto;
}

#container {
    display: flex;
    flex-direction: column;
    height: 100%;
    
    width: 50%;
    background-color: red;
}

#container header {
    background-color: gray;
}
#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}
#container footer {
    background-color: gray;
}

＆＃13;

<section id="container" >
    <header id="header" >This is a header</header>
    <div class="flexbox">
    
     <article id="content" >
        This is the content that
        <br />
        With a lot of lines.
        <br />
        With a lot of lines.
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
    </article>
    </div>
    <footer id="footer" >This is a footer</footer>
</section>

＆＃13;

CSS flexbox：如何使用嵌套div填充剩余的屏幕高度？

1 个答案: