如何才能让div在底部浮动，而不会在每次调整窗口大小时改变框的高度？
要让div在底部浮动，而不会在每次调整窗口大小时改变框的高度，可以使用CSS的flexbox布局来实现。
首先，需要将父容器设置为flex布局，并设置flex-direction为column，这样子元素会按照垂直方向排列。
然后，将要浮动在底部的div设置为flex-grow为1，这样它会占据剩余的空间。
最后，将父容器的高度设置为100vh，这样它会占据整个视口的高度。
以下是一个示例的代码：
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
flex-grow: 1;
background-color: lightgray;
}
.footer {
background-color: gray;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h1>Content</h1>
<p>This is the main content.</p>
</div>
<div class="footer">
<h2>Footer</h2>
<p>This is the footer.</p>
</div>
</div>
</body>
</html>在这个示例中，.container是父容器，.content是主要内容区域，.footer是底部浮动的div。通过设置.content的flex-grow为1，它会占据剩余的空间，而.footer会始终保持在底部。
这种方法可以确保div在底部浮动，并且不会在调整窗口大小时改变框的高度。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云产品：https://cloud.tencent.com/product
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobile
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云元宇宙：https://cloud.tencent.com/product/tencent-metaverse
相关·内容
在这里，我希望“一些文本一些文本”部分坚持在框的底部，我还希望框的高度与屏幕相同。然而，我所写的代码做了我想要的，但因为我手动添加了87.2vh的高度，所以每次调整浏览器窗口的大小时，底部都会上下移动。我怎么才能让它工作呢？这是我的HTML代码 <se
浏览 13提问于2019-09-17得票数 0
1回答
我一直在寻找一个浮动的div/menu，它不仅可以像下面的例子那样浮动
但是，当浮动框div/菜单高度超过视口的高度时，允许您使用主滚动条来查看位于视口上方或下方的菜单部分。但是，一旦它到达浮动框div/菜单的末尾，它将锁定在顶部或底部，这取决于您滚动的
浏览 4提问于2012-05-11得票数 0
我试图创建这个站点的第一部分的效果：我现在的方法只是调整调整大小的背景图像的宽度。我在div上有一个固定的高度<
浏览 2提问于2017-12-18得票数 0
回答已采纳
如何在调整窗口大小时调整Div的大小，该div位于其他div之间，我想不出如何调整；但我希望div；有一个高度；以便它在div；之下显示为页脚。好的，我知道我说的没有意义，但我想说的是：
换句话说，我正在尝试做对他们的索引所做的事情。“你会喜欢Tumblr<
浏览 0提问于2011-11-05得票数 0
回答已采纳
1回答
过滤div内容后调整div大小
、、、、
所有产品都有自己的div，但都在一个“大div”中。 当使用过滤器时，不符合过滤条件的产品的div将消失。但是，“大div”的高度不会改变。我们如何让“大div”的高度自动调整呢？需要说明的是，在应用滤镜之前，有很多产品，所以div
浏览 21提问于2019-04-21得票数 0
1回答
我正在尝试从头开始重建我的个人投资组合网站，主要是为了jQuery实践，我才刚刚开始，但遇到了两个问题。首先，这里有一个到我目前为止的预览的链接：
基本上，我的想法是让带有div的大背景图像在每次单击导航时滚动到视图中。当div滚动时，背景图像会发生变化。但是，我也希望通过break_size函数动态调整div的大小，这就是我遇到问题的地方。该函
浏览 0提问于2013-04-05得票数 0
我知道这是一个常见的问题，我真的为不能解决这个问题而感到愚蠢，但是我在HTML中有一个3列的布局，我真的不能解决这个问题。固定标题，每边1个侧边栏，中间区域有内容。这是我所说的站点的一个模型：
乍一看还不错，但当浏览器调整大小时，侧边栏就会变得非常小，并且会有大量的空白。为什么会这样呢？非常感谢你提前这么做。
浏览 4提问于2013-02-02得票数 0
3回答
我在灵活的容器中有一组左侧浮动的DIVs (第一部分)，当容器调整大小时，它不能在一行中包含所有的DIVs，而不是默认的行为(2)我希望各行完全对齐，在需要的地方保留空格(类似表的行为)，如第三部分所示
浏览 0提问于2011-01-22得票数 2
回答已采纳
3回答
跳过关于web设计中折叠的重要性的讨论，我想知道在考虑到响应性设计的浏览器折叠上，使用哪种技术来限制特定的部分(例如，可以是div )。有些网站甚至同时使用鼠标滚动和a按钮滑到下面的部分。例：
我的重点不是幻灯片本身，而是每个部分如何在折叠上呈现，而不管监视器分辨率如何。
浏览 1提问于2015-06-02得票数 1
回答已采纳
基本上它们不是浮动的。
高度固定为500px，一旦DIVs到达底部，我希望它们从下一列开始。因此，对于大约200个项目，您只需水平滚动即可看到div，而不是垂直滚动。DIVs的数量可以非常大，理想情况下，我希望在调整屏幕大小时推送行。所以没有固定的行，一个接一个地浮动。<div class="row show-grid"
浏览 2提问于2013-03-21得票数 1
回答已采纳
我创建了一个图像容器，可以自动适应每一行并保持比例，所以我使用了flex，在设置了宽度和flexGrow之后，一切看起来都很好。但是当我试图得到子项目的大小时，结果clientHeight是不正确的。那么，怎么回事？我是不是漏掉了什么，还是代码错了？
浏览 2提问于2018-05-26得票数 1
回答已采纳
1回答
如何创建一个布局，上面有固定高度的div，下面有一个始终占据页面其余高度和宽度的div。因此，如果调整窗口大小，则第二个div的高度和宽度也会相应地调整大小。我想实现的一个示例与在上找到的类似<html><body style="width:1
浏览 2提问于2011-09-18得票数 1
回答已采纳
5回答
div { top: 138px; left: 33px; position: absolute;我不认为div应该只有30磅高，而不是60磅高
浏览 4提问于2011-07-26得票数 0
回答已采纳
1回答
我有一种情况，我需要一个DIV的填充底部，这等于另一个DIV的高度，谁能帮助我如何用JQuery做这个？(原因是-我使用的是Masonry容器插件，它有一个# JQuery div，它调整宽度以匹配其中所有砖石‘砖块’的总宽度。我在#container DIV中也有一个滑块，当浏览器窗口调整大小时，它会随着#c
浏览 2提问于2013-04-08得票数 0
回答已采纳
我四处寻找答案，我试着把我能想到的一切都插进去，但我似乎找不出这个答案。我觉得我可能忽略了一些非常简单和明显的东西，但是你能给予的任何帮助都会很感激！基本上，我正在尝试自定义，以便小字符框在其.wrapper div中水平居中。如果有人愿意的话。提前感谢您的任何帮助！
浏览 6提问于2016-09-15得票数 0
3回答
我正试图在浏览器窗口中构建一个聊天界面，我无法正确地获得CSS，我尝试了大约10个小时。单元格#1和#3固定
编辑： #3也应该是一个固定的高度，例如80 by；其余的窗口高度将由#2使用。中间的单元格#2 (大的)将包含聊天线路，任何调整窗口大小的窗口都应该将滚动条放在该窗口上，而
浏览 5提问于2014-07-02得票数 1
回答已采纳
3回答
我使用的是稍微修改过的Soh Tanaka的，但在他的示例中，所有块/列的高度都相同。如果我有不同高度的div，该技术就会中断，如下面的所示。我不喜欢DeSandro的处理高度问题的方式，因为它根据窗口大小对块进行重新置乱，因此列表失去了隐含的顺序排序，所以我正在探索一种不同的解决方案。我可以使用javascript<
浏览 0提问于2012-01-25得票数 4
回答已采纳
1回答
今年夏天，我一直在与bootstrap合作，为我的实习工作重新设计一个网页，在从我的老板那里得到几个布局后，我希望这是最后一个。我对带有"mainContent“类的div和带有"sideFooter”类的div的浮点数有一些问题。在F/S视图中，高亮显示的表格应该在主侧边栏导航下平齐显示，但它没有做到这一点，因为有一个等于面板框高度的</em
浏览 1提问于2013-08-03得票数 0
我相信这个问题以前已经问过了，但我能找到的所有问题都太复杂了。非常简单，我如何将div容器对齐到页面的中心和中间，无论是水平的还是垂直的，这样当页面被调整大小时，它也会停留在那里。我所需要的只是一个带有div的空白浏览器窗口，当窗口被调整大小时，这个div会保持在屏幕的中心，不管是什么情况。水
浏览 6提问于2014-09-17得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
