gpt4 book ai didi

html - CSS 拉伸(stretch)到 100% 高度

转载 作者:太空宇宙 更新时间:2023-11-03 21:19:26 29 4
gpt4 key购买 nike

我正在尝试完成一些非常简单的事情。我可怜的生锈的 CSS 技能一点帮助都没有。

这是要实现的: enter image description here

我做不到。如果我使用 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 可以做到这一点。

Codepen Demo

* {
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/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com