0 
<!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>

绝对定位在顶部：560px。

如果<div class="tab-content" style="height:500px">有其他高度，我需要绝对定位横幅！

目标是创建该模板：

1) 引导选项卡

2）一个标签内的一个div，它是一个包含聊天的div

3) 在该 div 的底部，粘贴了一个横幅 div，其中将包含聊天输入文本

问候

想要的结果来了在此处输入图像描述

4

4 回答 4

2

在“标签容器”中设置“横幅”。将banner的位置设置为绝对位置并与底部定位

<div id ="tab-container" ...>
 <div id="banner" style="position:absolute; bottom: -2px;">
</div>
</div>
于 2013-09-20T04:08:21.850 回答
0

我同意 Arinta 的观点，如果横幅消失了，您可能需要检查 CSS 中的拼写错误。一些浏览器带有控制台，但大多数带有“右键单击 -> 检查”功能来检查正在拾取的 css。

此外，如果文本被新定位的 div 隐藏，您将希望文本可见。通过将 padding-bottom 设置为等于聊天的高度来允许这样做。

此外，父 div（您拥有 style='' 的那个）需要一个定位标签才能使绝对功能起作用。固定将起作用，但横幅相对于整个页面而不是下一个定位的元素定位。（由你决定，但我建议绝对）。

<div style="padding-bottom: 30px; position: relative" >
  <? include("lorem.php");?>
  <div id="banner" style="position:absolute;bottom:-30px;height:30px;width:100%;background-color:#F00">
  </div>
于 2013-12-31T05:58:09.597 回答
0

更改top:560px为bottom: 0。

请记住，定位元素（固定、绝对、相对）总是相对于具有另一个非默认位置的最近父元素。然后仔细检查你没有发布的元素的位置。

也考虑创建一个Fiddle。JPEG很烂。

于 2013-09-20T09:28:06.760 回答
0

您的问题不清楚，但似乎这就是您想要的。

<div class="tab-content" style="position:relative">
    <div class="tab-pane active" id="chat">
      <div style="" >
        <? include("lorem.php");?>
        <div id="banner" style="position:absolute;bottom:-30px;height:30px;width:100%;background-color:#F00"> </div>

这将使 div#banner 直接位于 div.tab-content 下方，无论 div.tab-content 有多高。

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

于 2013-09-20T03:34:51.457 回答