Question

我正在设计我的第一个非基于表的网站并遇到问题，因为DIV的行为与表行和单元格不同。该页面在包装器中有3个DIV（标题，文章，页脚），我有一个投影。标题高度为115像素。页脚：25px。文章的高度是：calc（100％ - 135px）;文章正确计算其高度并将页脚推到包装器的底部。

问题在于：

如果我使包装器具有100％的固定高度，则文章正确计算其高度并将页脚推到屏幕的底部（包装器的高度）。这篇文章甚至可以成长为其全部内容。问题是包装器不会扩展超过100％（屏幕高度），阴影只会向下延伸一个屏幕长度，即使其内容在屏幕下方向下延伸。

如果我通过设置min-height：100％来使包装器的高度不是绝对的，以便在它们生长和收缩时包含它的内容，那么文章DIV正确地延伸到包装器的高度但文章和包装器都是只延伸到足以包含文章内容。这可能会在浏览器窗口中留下大量空白。如何告诉包装器具有最小屏幕高度并延伸到更高的范围以包裹整个内容，同时允许文章div正确计算其高度，使得3个div延伸到包装器的高度？

< / LI>

HTML：

    <!DOCTYPE HTML >
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="/stylesheet.css">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>
     <body>
    <page >
    <wrapper class="shadow" style="width:75%; margin:0 auto; min-width:300px; min-height:100%; height:100%; margin-bottom:10px;" >
    <header >    </header>
    <article > </article>
    <footer ></footer>
    </wrapper>
    </page>
    </body>
    </html>

CSS：

    header{
    display:block;
    background-image: url('http://10.5.0.43:89/images/bg.jpg');
    height:115px;
    width:100%;
    margin:auto;
    text-align:left;
    background-color:#ffffff;
    vertical-align:bottom;
    }
    article{
    width:100%;
    margin:0 auto;
    vertical-align:top;
    background-color:#ffffff;
    padding:0; 
    height: calc(100% - 135px) !important;
    }

    footer{
    background-color:#4E70AF;
    width:100%;
    margin:auto;
    height:25px;
    font-size:8pt; 
    color:white; 
    font-face:arial;
    text-align:center;
    line-height:25px;

    }
    html, body{
    height:99%;
    background-color:#CCC;
    in-width:300px;
    }
    .shadow{
    box-shadow: 0px 0px 18px rgba(0, 0, 0, .7);
    }

Answer 1

将此css放入您的包装器中 .shadow {display: flex, flex-wrap: wrap; flex-flow: column, align-content: flex-start;}您需要使用<article>和中提琴flex: 1;设置样式。）

这是一个例子 https://codepen.io/baagii95/pen/mBoRQX

div的最小高度和内容至少100％

1 个答案: