gpt4 book ai didi

html - 固定高度 div 之上的可变高度 div

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

如果可能,我想只使用 css 和 html 创建以下布局:

 __________________________________
| ____________________________ |
| | | |
| | div1 variable height | |
| | | |
| | | |
| | | |
| | | |
| ---------------------------- |
| ____________________________ |
| | | |
| | div2 (50px height) | |
| ---------------------------- |
| |
| |
| |
| |
---------------------------------

div1 具有可变高度,应随着内容的增长而扩展,如果没有更多空间,则应出现垂直滚动条。

div2 应该始终在 div1 之下

我试过这样

HTML:

<body>
<div id="div1">div1
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content</div>
<div id="div2">div2</div>
</body>

CSS:

#div1 {
width:100%;
overflow:auto;
background-color:green;
}
#div2 {
width:100%;
height:50px;
background-color:red;
}

实例:http://jsfiddle.net/xucqF/16/

这里的问题是,如果视口(viewport)不够大,无法容纳所有内容,滚动条会出现在整个主体而不是 div1 本身。

最佳答案

使用问题中的代码,您可以使用以下 CSS。

通过使用calc 计算内容divmax-height,您可以实现您想要的行为。

Demo Fiddle

html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#div1 {
width:100%;
overflow:auto;
background-color:green;
max-height:calc(100% - 50px);
}
#div2 {
width:100%;
height:50px;
background-color:red;
}

关于html - 固定高度 div 之上的可变高度 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25140523/

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