Question

我不是一个专业的网络开发人员，但我正在设计一个帮助一个非盈利组织。我花了几天的时间在网上搜索关于css，float，position等的说明和解释。最后我设法用我想要的行为来设计我想要的布局但是仍然有些东西不起作用/我不明白。请参阅以下页面：“http://www.missione-berna.ch/index2.php”及其来源;我把所有代码放在其中以使其可访问（在结尾处，脚本，菜单和标题将在最终通过php包含的单独文件中）。为什么我的“菜单”div既不是其内容的大小也不是邻居“Contenuto”div的大小？我明白让两个div列的高度匹配并不是一件容易的事，但这个“中途”大小来自哪里？任何帮助，提前thansk赞赏。

Answer 1

首先，position: absolute可能是非常糟糕的事情。除非尝试从页面流中取出元素（让一个元素出现在另一个元素的顶部），否则请避免使用它。

其次，height: 100%没有做到，直觉上，你认为它确实如此。您将菜单div的高度设置为视口的高度（浏览器窗口）的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; }

所以整个事情都有灰色背景。您的菜单向左浮动（在灰色背景上）。 contentuo div的左边距为192px，以“清除”菜单，并具有白色背景以隐藏灰色。包装器和内容div以及灰色/白色背景将扩展到内容的大小。

一些提示：

小心height: 100%。
float: left或float: right 固有地设置display: block。您无法设置display: inline 浮动的元素。

Answer 2

我认为实现你想要实现的目标的最简单方法是将所有内容放在包装div中，如下所示：

<div class="wrapper"> 
    <div class="Fascione">...</div>
    <div class="Menu">...</div>
    <div class="Contenuto">...</div>
</div>

然后高度：菜单上的100％和菜单和Contenuto上的最小高度。

什么是设置我的列的高度？

2 个答案: