Question

刚刚在一年前使用div学习css / html（来自表格）我很困惑我如何在不同的页面上使单个div处于不同的高度，而不是因为它们的位置而为每个页面创建唯一的div，身高等。

我希望我正确地粘贴这个。

3页CSS代码示例

#homeBody { position:absolute; height: 728px; width: 900px; top: 131px; left: 394px;             background-color:#E0DDB6; left: 50%; margin-left: -450px; }
#homeFooter { position:absolute; height: 100px; width: 900px; top: 890px; left: 394px; left: 50%; margin-left: -450px; }

#worksBody { position:absolute; height: 469px; width: 900px; top: 131px; left: 394px; background-color:#E0DDB6; left: 50%; margin-left: -450px; }
#worksFooter { position:absolute; height: 100px; width: 900px; top: 630px; left: 394px; left: 50%; margin-left: -450px; }

#contactBody { position:absolute; height: 500px; width: 900px; top: 131px; left: 394px; background-color:#E0DDB6; left: 50%; margin-left: -450px; }
#contactFooter { position:absolute; height: 100px; width: 900px; top: 661px; left: 394px; left: 50%; margin-left: -450px; }

我知道工作太多了。必须有一种更简单的方法，我只是不知道如何实现它或搜索什么。如何为每个页面创建可以重复使用的div而不是唯一的div？

我一直在使用css并且已经成功创建了一个可以在不同页面上使用的div，但需要＆amp; nbsp来创建#content div的高度。

我当前的CSS示例

body { background-color: #716B5B; margin: 0; padding: 0; background-image:     url(../background/background.jpg); background-repeat:no-repeat; background-position:top;     min-height: 100%; }
{
 margin:0;
 padding:0;
}
html { height: 100%; }

#content { background-color:#E0DDB6; margin-bottom: 155px; top:140px; width: 900px; margin-left:auto; margin-right:auto; position:relative; }
#footer { position: relative; bottom:0; width: 900px; height: 155px; margin-left:auto; margin-right:auto; }

我可以在#content div中放置带有图像，文本等的div，同时无论#content的长度是多少，都可以在#footer下面放置div，但只能通过在#content中添加＆amp; nbsp来实现这一点。内容div。

非常感谢正确方向的一点！

感谢。

Answer 1

除了改变你的方式之外，没有什么好方法可以做到。

就我个人而言，我会用身份证和课程来安排它。

示例CSS：

#home .body {}
#home .footer {}

etc...

示例HTML：

<div id='home' class='body'>Content Here For Home Body</div>
<div id='home' class='footer'>Content Here For Home Footer</div>

您还可以为每个页面分别添加css文件，以便分割css内容。但这可能会使编辑更加繁琐。

不同页面上的内容div的不同高度

1 个答案: