Question

我有两个div，我想设置它们，因此body div从导航栏下方开始，但它们保持交叉。如何使bodyContainer div始终位于导航栏下方？

HTML：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css.css">
    <meta charset="utf-8">
</head>
    <div id="topBarContainer">
        <div id="topBar">
            <span id="topBarTitle">Private & Air's Shop</span>
        </div>
    </div>
    <div id="bodyContainer">
        <div id="bodyContent">
            <div id="mainBodyContent">
            test
            </div>
        </div>
    </div>
</html>

CSS：http://pastebin.com/u5Z4ib4q css很长，所以我把它放进了一个pastebin。

Answer 1

您使用了固定位置#topBarContainer。因此，您需要在正文容器中添加上边距

Answer 2

在你的CSS上

#bodyContainer {
     margin-top:50px;/*the height of your header*/
}

应该这样做！：）

Answer 3

我会从position: fixed;中删除#topBarContainer，这会将#bodyContainer放在导航栏下方。

我可以选择将#topBar height: 75px;更改为min-height: 75px;，这样您就不会在较小的视口中丢失内容。

这里的小提琴：http://jsfiddle.net/9me3hob3/

Answer 4

你在css的#topBarContainer上使用'position：fixed'。这意味着当页面上的其他元素占据其位置时，它们将完全忽略#topBarContainer，就好像它首先不存在一样。所以从css文件中删除'position：fixed'。如果您选择使用'position：fixed'故意保持＃topBarContainer的位置，即使页面向上滚动，那么您应该将以下内容添加到＃bodyContainer＃topBarContainer以强制它在#topBarContainer div下

位置是：固定; 顶部：960x75像素;

两个div进入彼此

4 个答案: