我正在尝试完成一些非常简单的事情。我可怜的生锈的 CSS 技能一点帮助都没有。
这是要实现的:
我做不到。如果我使用 height: 100% 它在没有太多文本时有效，但是当我添加大量 Lorem Ipsum 时，内容 div 会被拉伸(stretch)并且左侧菜单 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;
}
最佳答案
Flexbox 可以做到这一点。
* {
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;
}<header></header>
<section>
<aside></aside>
<main></main>
</section>关于html - CSS 拉伸(stretch)到 100% 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38849094/