在CSS中排列和定位两个div彼此之下

I'm new to CSS, so this question might be dead simple. I am laying out a website and am stuck with positioning.

我是CSS的新手,所以这个问题可能很简单。我正在建立一个网站,并坚持定位。

On the site, I have a middle section in which there is a header with some scrollable content underneath. Here's the relevant CSS for the header div:

在网站上,我有一个中间部分,其中有一个标题,下面有一些可滚动的内容。这是标题div的相关CSS:

#header {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
}

Now, I simply want the content div to immediately follow underneath, and can't figure out how to do that.

现在,我只是希望内容div立即跟在下面,并且无法弄清楚如何做到这一点。

position: relative; 
top: 0;

doesn't seem to work (which I initially expected to). Both divs are on the same logical level and wrapped inside the middle section div. I am probably missing something extremely obvious and easy.

似乎不起作用(我最初预期)。两个div都在相同的逻辑级别上并包含在中间部分div中。我可能错过了非常明显和容易的事情。

3 个解决方案

#1

If you have something like

如果你有类似的东西

<header>header</header>
<main>main content</main>

Use this css:

使用此css:

header, main
{
    display: block; /* because <main/> is very new */
    padding: 20px;
    background: #eeeeee;
}

header
{
    background: blue;
}

That's all, because block elements go below each other per default.

这就是全部,因为块元素默认情况下彼此低于其他元素。

http://jsfiddle.net/86wX4/

#2

Is there any reason that your #header is absolutely positioned? Remove that style and I think you'll find the <div>s will stack how you're expecting.

您的#header是否有任何理由绝对定位?删除那种风格,我想你会发现

会叠加你期望的样子。

Giving the <div> an absolute positioning takes it out the flow of the page, so elements that are still in the flow, 'don't think' it's there, hence, they don't stack on top of each other.

给

一个绝对定位可以将页面的流量取出来,所以仍然在流程中的元素“不要认为”它在那里,因此,它们不会叠加在一起。

Say this is your markup:

说这是你的标记:

<div id="header">Header</div>
<div id="content">Content</div>

If you are going to absolutely position these elements you'll want to arrange them using left, top, right and/or bottom styles. I.E:

如果您要绝对定位这些元素,您需要使用左,上,右和/或底部样式来排列它们。即:

#header{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 50px;
}
#content{
    position:absolute;
    width:100%;
    top:50px; //Because the header is 50px high
}

BUT

Positioning all of these relatively (or leaving them at the default, static) would stack them how you want them anyway - and they would even stretch the width of the page for you.

相对地定位所有这些(或者将它们保留为默认值,静态)将无论如何都将它们堆叠起来 - 它们甚至会为您拉伸页面的宽度。

Hope this helps.

希望这可以帮助。

#3

is there any reason to use your header div with absolute position? you can use relative position for both div's to arrange below each other.

有没有理由使用你的头部div与绝对位置?你可以使用两个div的相对位置来安排在彼此之下。

#1