gpt4 book ai didi

css - 如何使相对于另一个div的固定位置div?

转载 作者:太空宇宙 更新时间:2023-11-04 04:21:58 25 4
gpt4 key购买 nike

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script language="javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="myContainer">
<ul class="nav nav-tabs" >
<li class="active"><a href="#chat" data-toggle="tab">Chat</a></li>
<li><a href="#users" data-toggle="tab">Users</a></li>
</ul>
<div class="tab-content" style="height:500px">
<div class="tab-pane active" id="chat">
<div style="" >
<? include("lorem.php");?>
<div id="banner" style="position:fixed;top:560px;height:30px;width:100%;background-color:#F00"> </div>
</div>
</div>
<div class="tab-pane" id="users"> dd... </div>
</div>
</div>
</body>
</html>

工作正常:问题是

    <div id="banner" style="position:fixed;**top:560px**;height:30px;width:100%;background-color:#F00"> </div>

绝对定位在顶部:560 像素。

如果<div class="tab-content" style="height:500px">有另一个高度,我需要绝对定位横幅!

目标是创建该模板:

1) Bootstrap 标签

2) 一个选项卡内的一个 div,它是一个将包含聊天的 div

3) 在那个 div 的底部,粘贴一个包含聊天输入文本的横幅 div

问候

想要的结果来了enter image description here

最佳答案

在“标签容器”中设置“横幅”。将banner的位置设置为absolute并定位到bottom

<div id ="tab-container" ...>
<div id="banner" style="position:absolute; bottom: -2px;">
</div>
</div>

关于css - 如何使相对于另一个div的固定位置div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18906691/

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