Question

在这里拿两个。这个问题一直困扰着我。我有一个理想的布局，类似于此;

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

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

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

Answer 1

您很可能需要根据javascript中的browser window height设置DIV元素的高度来实现此目的。

Answer 2

Lemme说了一些建议。

您没有div的结束标记，可能会继承这些样式。关闭div s。
您需要使用<body>关闭</body>。
没有父div用于包装元素。如果您希望文档具有类似单个屏幕的内容，并且整个内容都是手风琴，则可以通过提供固定高度并定位内部div来实现此目的。但我希望您在UL和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代码。

Answer 3

指点：

您的结束body代码有误，应为</body>
您的div代码未关闭。
您正在使用id属性，就好像它是class。

如果我理解你的问题，这些部分不应重叠。

检查this 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%;
}

设置高度属性

3 个答案:

守则