我不是专业的网络开发人员，但我正在设计一个帮助非营利组织的网站。 我花了几天时间在网上搜索有关 css、float、position 等的说明和解释。最后我设法用我想要的行为设计了我想要的布局，但仍然有一些东西不工作/我不明白. 请参阅页面:“http://www.missione-berna.ch/index2.php”及其来源；我将所有代码放入其中以使其可访问(最后，窗框、脚本、菜单和标题将位于单独的文件中，最终通过 php 包含在内)。 为什么我的“菜单”div 既不是其内容的大小也不是邻居“Contenuto”div 的大小？ 我知道让两个 div 列的高度匹配不是一件容易的事，但是这个“中间”尺寸是从哪里来的呢？ 任何帮助表示赞赏，提前谢谢。
最佳答案
首先，position: absolute 可能是一件非常糟糕的事情。避免使用它，除非试图将元素从页面流中移除(让一个元素出现在另一个元素之上)。
其次，height: 100% 并不像您直觉上认为的那样。您将菜单 div 的高度设置为视口(viewport)(您的浏览器窗口)高度的 100%，而不是整个页面的 100%。
由于您的菜单有一个简单的背景，您可以使用一个巧妙的技巧使它看起来具有相同的高度。 CSSDesk
我在您的菜单和内容周围添加了一个包装器 div。 HTML 的相关位:
<body>
<div id="Fascione">
<img id="FotoAngolare" alt="ChiesaEsterno" src="images/esterno.jpg" width="195" height="122">
<div id="Impressum">
<span class="Intestazione">Missione Cattolica Italiana</span><br>
<span class="Titolo">Chiesa "Madonna degli Emigrati"</span><br>
<span class="Testo">Bovetstrasse 1 - 3007 Bern<br>Tel. 031 371 0243 / Fax. 031 372 1656</span><br>
<a class="Email" href="mailto:missione.berna@bluewin.ch">missione.berna@bluewin.ch</a>
</div>
</div>
<div id="wrap">
<div id="Menu">
<a href="top"></a>
<ul id="MenuList" class="Testo"></ul>
<div id="Contenuto">
<p></p>
</div>
</div>
</body>
然后这样设计:
#wrap { background: #e8e8e8; }
#Menu {float:left; width:195px; }
#Contenuto { background: #fff; border-left: 2px solid black; margin-left: 196px; min-width:829px; padding: 1px 1px 1px 15px; }
所以整个东西的背景都是灰色的。您的菜单向左浮动(在灰色背景上)。 contentu div 有一个 192px 的左边距来“清除”菜单，并且有一个白色背景来隐藏灰色。包装和内容 div，以及灰色/白色背景，将扩展到您的内容的大小。
一些提示:
- 注意
height: 100%。 float: left或float: right固有地设置display: block。你不能设置display: inlineon float 元素。
关于css - 什么设置了我的列的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8702937/