Question

我有一个带有页眉，页脚和中心内容部分的CSS端。

我想使用浏览器窗口的完整高度。

e.g。

header - height: 20vh
content - height: 60vh
footer - height: 20vh

那是100vh和完整的窗口。

是否可以使用CSS 动态地进行分解，而使用javascript手动操作样式关于应用程序状态（是否为页脚）？

让我们说如果页脚被禁用，内容应该有80vh，如果是，则内容应该是60vh。

Answer 1

为什么不使用flexbox或grid？

设置页眉和页脚的最小高度（以vh为单位），然后为内容添加100％的高度。

然后，flexbox使用内容的所有可用空间，但仍然呈现其他元素的最小高度。

＆＃13;

function changeVisibility() {
  document.querySelector( 'footer' ).classList.toggle( 'hidden' );
}

＆＃13;

*, *::before, *::after {
  margin: 0;
  box-sizing: border-box;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  /* set default height */
  flex-basis: 10vh;
  background: lightyellow;
}

.content {
  /* use all available space */
  flex-grow: 1;
  background: pink;
}

footer {
  /* set default height */
  flex-basis: 20vh;
  background: lightblue;
}

.hidden {
  display: none;
}

＆＃13;

<div class="container">
  <header>header <button onclick="changeVisibility()">toggle footer</button></header>
  <div class="content">content</div>
  <footer>footer</footer>
</div>

＆＃13;

Answer 2

我认为这段代码将通过css帮助你动态高度

（添加更多内容只有一个框，并看到3个框高度增加）

#main {
    width: 220px;
    height:auto;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    -webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */    
    flex: 1;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;">BLUE</div>  
  <div style="background-color:lightgreen;">Green div with more content. Green div with more content.</div>
</div>

<p><b>Note:</b> Internet Explorer 9 and earlier versions do not support the flex property.</p>
<p><b>Note:</b> Internet Explorer 10 supports an alternative, the -ms-flex property. IE11 and newer versions fully support the flex property (do not need the -ms- prefix).</p>
<p><b>Note:</b> Safari 6.1 (and newer) supports an alternative, the -webkit-flex property.</p>
</body>
</html>

Answer 3

您可以使用 Flexbox 执行此操作，您可以将#content设置为使用flex: 1获取剩余的垂直空间：

function display() {
  document.getElementById('footer').classList.toggle('display');
}

html, body {width:100%;height:100vh;margin:0}

body { /* or any other parent element / flex-container */
  display: flex; /* displays children inline by default thats why you need to change its direction from row (default) to column */
  flex-direction: column; /* stacks children vertically */
}

header, footer {
  height: 20vh;
}

#content {
  flex: 1; /* takes the remaining vertical space no matter if the footer is present or not or even if its the only child element inside the flex-container */
  background: Aquamarine;
}

.display {display:none}

<header>HEADER</header>
<div id="content">CONTENT <a href="#" onclick="display()">Toggle height</a></div>
<footer id="footer">FOOTER</footer>

CSS：动态div-height

3 个答案: