Question

我正在努力完成一些非常简单的事情。我糟糕的生锈CSS技巧无济于事。

这是想实现：

我无法实现。如果我使用height: 100%它可以在没有太多文本的情况下工作，但是当我添加大量Lorem Ipsum时，内容div会被拉伸而左侧菜单div不会随之缩放。

我不想使用JavaScript，如果可能的话，只需清理CSS。

HTML：

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content">Content (paste a lot of lorem ipsum here and menu doesn't stretch)</div>
</body>
</html>

CSS

body
{
    margin: 0;
    height: 100%;
    background-color: gray;
}
#header
{
    height: 50px;
    background-color: white;
    border: 1px solid black;
}
#menu
{
    width: 225px;
    float: left;
    height: calc(100% - 50px);
    background-color: white;
    border: 1px solid black;
}
#content
{
    overflow: auto;
    background-color: white;
    border: 1px solid black;
}

Answer 1

Flexbox可以做到这一点。

Codepen Demo

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  height: 50px;
  background: #bada55;
}
section {
  display: flex;
  flex: 1;
  background: #c0ffee;
}
aside {
  width: 150px;
  background: darkgoldenrod;
}
main {
  min-height: 100%;
  /*height: 2000px;*/  /* uncomment this to see difference */
  background: blue;
  flex: 1;
}

＆＃13;

<header></header>
<section>
  <aside></aside>
  <main></main>
</section>

＆＃13;

Answer 2

尝试相对于视口高度给出高度。的 VH

height:100vh;

CSS伸展到100％高度

2 个答案: