Question

此问题已在此处提出，是的。但是这些答案似乎都不适合我和我想要做的事情。

我需要在整个浏览器中显示div。到目前为止，我有这个。

HTML

<body>
        <div id="header">My Website</div>
        <div id="games">Video Games</div>
</body>

CSS

#header {
    height: 80px;
    background-color: black;
    color: white;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

#games {
    height: 40px;
    border: 1px solid black;
    background-color: grey;
}

因此，top:0, left:0和position:absolute是我的div跨越整个页面的原因。有什么问题？

我的#games div隐藏在#header div后面。我对html和css相对较新，当我开始学习div时，它们会显示在彼此旁边或右下方并且彼此叠加。

当我取出position:absolute时，#games div会降至#header div以下，但标题div只会转到页面左侧和右侧的边缘以及顶部。我希望它一直走到边缘，在div和浏览器两侧之间没有空格，并且我的#games div自然地显示在下面。

请注意，我知道我可以调整#games div的上边距，但我想知道是否有办法让它自然地位于#header div下面。

我可以做些什么来使我的#games div自然隐藏在#header div后面，并且位于下方？

Answer 1

我的建议是这样做DEMO：

body {
   margin: 0;
}

#header {
   height: 80px;
   background-color: black;
   color: white;
}

#games {
   height: 40px;
   border: 1px solid black;
   background-color: grey;
}

Answer 2

<body>
    <div id="main_wrap">
        <div id="header">My Website</div>
        <div id="games">Video Games</div>
    </div>
</body>

CSS

body{
    margin: 0px;
    padding: 0px;
}
#main_wrap {
    background-color: gray;
    width: 100%;

}

#header {
    height: 80px;
    background-color: black;
    color: white;
    width: 100%;
    top: 0;
    left: 0;

}

#games {
    height: 40px;
    border: 1px solid black;
    background-color: grey;
}

Answer 3

position: absolute;这告诉浏览器应该从文档的正常流程中删除要定位的内容，并将其放置在页面上的确切位置。

所以在你的CSS中意味着你不需要使用position:absolute，因为默认情况下，当你将div放入html文档时，它将从top, left开始。

注意：您应该考虑在最坏的情况下使用position:absolute，如果仍然需要使用，请确保父div应为position:relative。

#header {
    height: 80px;
    background-color: black;
    color: white;
    width: 100%;
  /*  top: 0;
    left: 0;
    position: absolute;*/
}

使用CSS和html在整个浏览器中显示Div

3 个答案:

CSS