Question

我有一个内容和页脚的包装类。包装类.app-footer应该至少需要100vh。在里面我footer有一些链接和#app-container。最后一个id应占用页面中的所有可用空间。

如果页脚占用10vh，#app-container应该至少为90vh。

这是我的代码：

＆＃13;

/*
RESETS ------------------------
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%}

/*
RESETS END --------------------
*/

body {
    background: linear-gradient(290deg, rgba(0,149,201,.21), rgba(108,32,133,.21)) fixed;
    font-family: "HelveticaNeue-Thin", "Helvetica Neue Thin", "Helvetica Neue", Helvetica, sans-serif;
}

#app-container {
    background-color: white;
    display: flex;
    align-items: center;
    margin-left: 50px;
    margin-right: 50px;
}

.app-footer {
    height: 100%;
    min-height: 100vh; /* These two lines are counted as one :-)       */
}

＆＃13;

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React App</title>
  </head>
  <body>
    <div class="app-footer">
      <div id="app-container">dsdsd</div>
      <footer>
        <span class="social">G.H.</span>
        <span class="social">I.G.</span>
        <span class="social">F.B.</span>
        <span class="social">T.W.</span>
      </footer>
    </div>
  </body>
</html>

＆＃13;

Answer 1

如果我理解，您希望.app-footer成为column方向的灵活父级，请在flex-grow上设置#app-container，以便填充可用空间（或简称flex: 1 0 0

＆＃13;

/*
RESETS ------------------------
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%
}


/*
RESETS END --------------------
*/

body {
  background: linear-gradient(290deg, rgba(0, 149, 201, .21), rgba(108, 32, 133, .21)) fixed;
  font-family: "HelveticaNeue-Thin", "Helvetica Neue Thin", "Helvetica Neue", Helvetica, sans-serif;
}

#app-container {
  background-color: white;
  margin-left: 50px;
  margin-right: 50px;
  flex: 1 0 0;
  display: flex;
  align-items: center;
}

.app-footer {
  height: 100%;
  min-height: 100vh;
  /* These two lines are counted as one :-)       */
  display: flex;
  flex-direction: column;
}

＆＃13;

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React App</title>
  </head>
  <body>
    <div class="app-footer">
      <div id="app-container">dsdsd</div>
      <footer>
        <span class="social">G.H.</span>
        <span class="social">I.G.</span>
        <span class="social">F.B.</span>
        <span class="social">T.W.</span>
      </footer>
    </div>
  </body>
</html>

＆＃13;

高度填补可用空间

1 个答案: