Question

我有一个由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; dr我如何阻止我的div越过页面边界？

Answer 1

而不是绝对位置和顶部，尝试margin-top：28px：

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

Answer 2

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

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

Answer 3

安德鲁，

在查看答案（大部分内容正确）和您的网站后，我发现您使用的是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;
  }

这应该通过现代技术实现您的目标。

从我的div的顶部移开29px而不移动它？

3 个答案: