0

我有一个由 4 个 div 组成的网站布局。

<div class="global">
<div class="content">
</div>
<div class="top">
</div>
<div class="footer">
</div>
</div>

应用了以下样式

div.top{
position:fixed;
top:0px;
width:100%;
height:28px;
background-color:rgb(55,55,55);
border-bottom:1px solid black;
}

应用了以下样式

div.footer{
position:fixed;
float:right;
bottom:0px;
left:87.5%;
border:1px solid:black;
border-bottom:0;
}

有这个

div.content{
position:absolute;
bottom:0;
top:28px;
width:100%;
background:transparent;
margin:auto;
padding:0;
}

我遇到的问题是内容 div，我希望它直接从顶部下方开始并继续沿着页面的其余部分向下，但是它在页面底部的位置恰好超出了我设置顶部位置的多少 px . 现在，由于我使用 px 作为顶部的大小，我无法应用百分位数，那么仅使用 css 执行此操作的最佳方法是什么。

我需要这个的网站是http://www.andysinventions.info/test/问题可以在标有“论坛”的标签上看到

tl;博士我怎样才能阻止我的 div 越过页面边界？

4

3 回答 3

1

instead of absolute position and top, try margin-top:28px:

div.content{
    bottom:0;
    width:100%;
    background:transparent;
    margin: 28px auto 0 auto;
    padding:0;
}
于 2012-04-04T19:28:36.747 回答
0

安德鲁，

在查看了答案（大部分是正确的）和您的网站后 - 我注意到您正在使用 iframe。在 2012 年，iframe 作为设计功能已成为过去，仅用作第三方添加物，如异地小部件和提要（或沙盒）。

您需要为您的目标构建这样的页面：

<!doctype html>
<html>
  <head>
    <title>A title</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <ul id="menu">
      <!-- menu content here -->
    </ul>
    <!-- Actual page content here -->
  </body>
</html>

在 style.css 中有这些规则：

body { margin: 28px 0 0; }

ul#menu {
  position: absolute;
  top: 0;
  left: 0;
  }

这应该可以使用现代技术实现您正在寻找的东西。

于 2012-04-04T19:57:28.133 回答
0

发生这种情况是因为您使用的是top:28px; 向下移动顶部栏。相反，您应该使用margin-top:28px; 并取出绝对定位。

div.content{
    width:100%;
    background:transparent;
    margin:28px auto 0 auto;
    padding:0;
}
于 2012-04-04T19:30:42.140 回答