Question

所以我有两个div，一个是.header，另一个是.content，它们会占据整个页面。 .header将设置到位，只有内容会滚动。

我想基于height height的{{1}}使内容.header无动态。

如果calc已修复.header，可以使用height来实现这一目标，但由于height可能会有所不同，因此无法实现。

代码：

＆＃13;

.container {
  height: 100%;
}
.header {
  height: 50px; // height is fixed, not great for dynamic content
}
.content {
  height: calc(100% - 50px); // height is a subtraction
}

＆＃13;

<div class='container'>
  <div class='header'>Header</div>
  <div class='content'>
    Content
  </div>
</div>

＆＃13;

请参阅切换内容here

是否存在仅限CSS的解决方案，根据height的大小计算.content的{{1}}？

Answer 1

您可以{/ 1}}使用

＆＃13;

flexbox

＆＃13;

html,
body {
  margin: 0;
  height: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  height:100%
}
.header {
  display: flex;
  border: 5px solid red
}
.content {
  flex: 1;
  border: 5px solid green
}

＆＃13;

旧版浏览器的CSS表（在评论中请求OP）

＆＃13;

<div class='container'>
  <div class='header'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at libero ut arcu tincidunt porta. Vestibulum in ex nec neque rutrum vestibulum a nec eros. Morbi accumsan nisl in justo viverra, non euismod libero sagittis. Aenean vulputate tortor
    molestie metus iaculis ornare. Vestibulum posuere, mauris eget tempor tincidunt, arcu risus eleifend felis, ac fringilla mauris lorem sit amet risus. Ut id ante eu nisl hendrerit tincidunt ac ut velit. Sed efficitur ante in neque mollis feugiat. Nulla
    sed erat nec ipsum fermentum tristique. Sed auctor dolor quis fringilla ullamcorper. Duis luctus ligula nibh, ac facilisis eros dapibus at. Aliquam eget vestibulum sem, a euismod ante. Quisque at arcu arcu. Nunc massa tellus, imperdiet in facilisis
    vitae, maximus at neque. Maecenas et dictum enim.</div>
  <div class='content'>
    Nam vehicula tempor est et ultrices. Cras elementum, mi ac pellentesque ultricies, dui urna rutrum risus, quis tristique ante eros in tellus. Quisque sit amet varius erat. Aliquam dapibus eros augue, et blandit nulla volutpat nec. Duis nibh lacus, scelerisque
    in interdum in, hendrerit eget justo. Pellentesque finibus nisi sed fermentum aliquet. Mauris feugiat, magna in sagittis dapibus, neque justo convallis risus, eget rutrum metus tellus eget lorem. Suspendisse at turpis faucibus eros dapibus feugiat
    vel at elit. Sed ac arcu tempor, molestie elit ut, eleifend dolor. Morbi fringilla enim ac lectus lobortis, ac convallis orci mollis. Ut tempus quam sodales, tincidunt dolor non, dapibus neque. Fusce elementum magna dolor, non suscipit est imperdiet
    at. Vivamus mattis augue vestibulum, ultricies dui ac, finibus erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Curabitur id cursus sapien. Phasellus placerat finibus vehicula. Donec
    sit amet nisi eget risus venenatis euismod. Curabitur quis felis tempus, egestas ante eget, efficitur dolor. Duis ullamcorper commodo massa, a efficitur turpis finibus nec. Cras eget dui purus.
  </div>
</div>

＆＃13;

html,
body {
  margin: 0;
  height: 100%;
}
.container {
  display: table;
  width: 100%;
  height: 100%
}
.header {
  display: table-row;
  background: red
}
.content {
  display: table-row;
  background: green
}

＆＃13;

Answer 2

使用display: flex

html, body { margin: 0; height: 100%; }
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.header {
  background: blue;
}
.content {
  flex: 1;
  background: red;
}

<div class='container'>
  <div class='header'> Header </div>
  <div class='content'>
    Content
  </div>
</div>

或display: table

html, body { margin: 0; height: 100%; }
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.header {
  display: table-row;
  height: 0;                  /*  shrink to fit content  */
  background: blue;
}
.content {
  display: table-row;
  background: red;
}

<div class='container'>
  <div class='header'> Header </div>
  <div class='content'>
    Content
  </div>
</div>

并与后备合并，flex在支持的情况下启动。

注意，如果header缩小为内容，则需要height: 0 html, body { margin: 0; height: 100%; } .container { display: table; width: 100%; height: 100%; } .header { display: table-row; height: 0; /* shrink to fit content */ background: blue; } .content { display: table-row; background: red; } @supports (display: flex) { .container { display: flex; flex-direction: column; } .header { display: block; height: auto; } .content { flex: 1; display: block; } }

<div class='container'>
  <div class='header'> Header </div>
  <div class='content'>
    Content
  </div>
</div>

add_action( 'wp_enqueue_scripts', 'register_custom_plugin_styles' );

function register_custom_plugin_styles() {
    wp_register_style( 'fira', 'https://code.cdn.mozilla.net/fonts/fira.css' );
    wp_enqueue_style( 'fira' );
}

CSS Only - 基于兄弟的div的高度

2 个答案: