多个全屏部分，其中包含绝对定位的 div答案

【问题标题】：Multiple fullscreen sections with absolute positioned divs inside多个全屏部分，其中包含绝对定位的 div
【发布时间】：2015-11-26 22:21:01
【问题描述】：

我正在创建一个网站，我希望每个部分都占据全屏。我有：

 html, body {
height: 100%;
width: 100%;
margin: 0;
}

每个部分都有 100% 的高度和宽度以及相对位置。在第二部分中，我想创建四个占据每个角落的 div。他们共享一个高度和宽度为 50% 和绝对位置的类。我尝试通过选择每个 id 并给它们 top:0 left:0, top:0 right: 0 等来单独定位它们。

问题是，左右定位有效，但是当我尝试定位顶部或底部时，div 将转到第一部分的顶部或底部，而不是第二部分。我认为将两个 100% 的 div 放在一起可能是个问题，但我不确定。非常感谢任何建议！

【问题讨论】：

我还尝试在第二部分中创建两个 div，每个高度为 50%，然后在每个部分的左侧和右侧放置两个 div。那也没有用。
不确定你有什么问题（或者我理解正确），但我创建了一个你提到的样本，它像这样工作正常one
你能做一个小提琴吗？
@HenryVarro 我尝试实现你所做的here，但我仍然遇到同样的问题，方块覆盖我的第一个 div。如果您对 css 的 .same2 部分进行评论，您可以看到还有另一个 div 被覆盖。

标签： html css height

【解决方案1】：

看到你的小提琴后，我看到你在“.work”类中写错了“position”这个词，旁边你可以在两个div之间添加一个div clear” .hero" 和 ".work"，它会起作用

<!--==== HEADER =============================================-->

        <div class="header">
            <div class="container">
                <ul>
                    <li><a href="#">Home</a></li><!--
                 --><li><a href="#">Work</a></li><!--
                 --><li><a href="#">About</a></li><!--
                 --><li><a href="#">Contact</a></li>
                </ul>
            </div><!-- container -->
        </div><!-- header -->


        <!--===== HERO =============================================-->

        <div class='hero' data-type="background" data-speed="10">
            <div class='name'>
                <h1>kdjfkd</h1>
                <h2>fdasfdr</h2>
                <h2><span >fgafd</span></h2>
            </div>
        </div><!-- hero -->
<div style="clear:both"></div>


<!--   ============= WORK ==================     -->

        <div class='work'>

            <div class="same2" style="background-color:red; top:0;left:0"></div>
            <div class="same2" style="background-color:yellow; top:0;right:0"></div>
            <div class="same2" style="background-color:white; bottom:0;left:0"></div>
            <div class="same2"style="background-color:green; bottom:0;right:0"></div>

        </div>

 .work{
        height: 100%;
        width: 100%;
        position: relative;
    }

Demo

编辑：根本不需要“clear:both”，它仍然可以正常工作

【讨论】：