Question

我有一个网页，其中包含一些部分。

我将这个css类用于使其具有反复性的部分，但它没有响应，那么多。有些显示器在该部分有更多的空白区域，其中一些适合显示器。

    .section {
    height: 100%;
    padding-top: 20px;
}

我相信我应该更改section中的css课程。但不知道该改变什么。

以下是各个部分的html代码：

    <div class="section" id="1">
<section>
<br/>
<br/>
<br/>
<br/>
<h1>Line 1</h1>
<h1>Line 2</h1>
<h1>Line 3</h1>
<h1>Line 4</h1>
<h1>Line 5</h1>
<h1>Line 6</h1>
</section>
</div>

编辑：各个部分的宽度都很棒，但高度不是那么好。一些设备显示了部分的所有高度，其中一些显示了部分高度，有些则适合。

有些设备显示第1行，第2行和第3行显示所有设备。不同。

在较小的设备中显示所有带有大量空格的行，这意味着可以使用更多内容，但在较大的设备中只显示三行甚至更少。

我想让所有部分及其内容都有效，并希望在css课程中使用section。

如何让各部分对所有设备做出响应？

提前致谢

Answer 1

要在高度中使用％值，您需要确保元素的每个祖先也使用％值作为高度。对于宽度％，值可以正常工作，您可以轻松实现响应。

顺便说一下，为什么不尝试像Bootstrap或Foundation这样的响应式框架呢？

Answer 2

而不是'height：100％;'，请尝试'height：auto;'。我不太确定你想要用这些部分实现什么，但我假设你想要根据你的内容达到一致的高度。

不能在html中制作响应部分

2 个答案: