0

在这里拿两个。这个问题一直困扰着我一段时间。我有一个想要的布局，类似于这个；

<body>
<div id="first section">
<div id="second section">
<div id="third section">
<div id="fourth section">
<body>

基本上我的目标（基本而言）是一个 400% 高度的布局，每个“部分”，可以这么说，占据所有不同尺寸屏幕的 100% 高度。我玩了很多混合，最大和高度属性无济于事，包括将身体的高度设置为 100%，每个“部分”为 25%...

这可能与基本的css有关还是我正在寻找更多技术性的东西？

4

3 回答 3

0

让我说一些建议。

  1. 您没有 的结束标签div，它可能会继承样式。所以关闭divs。
  2. 你需要关闭你的<body>using </body>。
  3. 没有div用于包装元素的父级。如果您希望文档具有类似于单个屏幕的内容，其中包含手风琴式的全部内容，您可以通过提供固定高度并定位内部divs 来实现。UL但我更喜欢你在and中做同样的事情LI。

因此，您的问题的解决方案可能是这样的。有这个布局...

<body>
    <div class="wrap">
        <div id="first section"></div>
        <div id="second section"></div>
        <div id="third section"></div>
        <div id="fourth section"></div>
    </div>
</body>

现在，您需要height为.wrap，通常是屏幕的高度。现在，同样的屏幕高度也应该分配给各个部分。保留这些部分，相对定位并overflow: hidden;包裹起来div。

.wrap {height: 100px /* just for here */; overflow: hidden;}
.wrap .section {height: 100px /* just for here */; position: relative;}

现在，当您要显示第一页时，请使用以下方式：

.first {top: 0;}

或者，你甚至可以这样做。

.section {display: none;}
.first.section {display: block;}

查看这个Fiddle的代码。

于 2013-01-27T06:43:49.500 回答
0

几个指针：

  • 你的结束body标签是错误的，应该是</body>
  • 您的div标签未关闭。
  • 您正在使用该id属性，就好像它是class.

如果我正确理解了您的问题，则这些部分不应重叠。

检查这个jsfiddle，看看它是否是你要找的。

编码

标记：

<div class="first section">First section</div>
<div class="second section">Second section</div>
<div class="third section">Third section</div>
<div class="fourth section">Fourth section</div>

CSS：

html,body {
    min-height: 100%;
    height: 100%;
}

.section {
    min-height: 100%;
}
于 2013-01-27T06:46:59.337 回答
0

您很可能需要根据javascript 中的浏览器窗口高度DIV设置元素的高度来执行此操作。

于 2013-01-27T06:39:22.507 回答