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

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

css html

Css 什么是设置我的列的高度？,css,html,Css,Html,我不是一个专业的网络开发人员，但我正在设计一个帮助一个非盈利组织。我花了几天时间在网上搜索css、float、position等方面的说明和解释。最后，我设法用我想要的行为设计了我想要的布局，但仍然有一些不起作用/我不明白。请参阅以下页面：http://www.missione-berna.ch/index2.php“及其来源；我把所有的代码都放在里面，让它可以访问（最后，脚本、菜单和标题将放在单独的文件中，最终通过php包含）。为什么我的“菜单”div既不是其内容的大小，也不是相邻的“C

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

感谢您的帮助，请提前离开。

首先，

位置：绝对

可能是一件非常糟糕的事情。除非试图将元素从页面流中移除（使一个元素出现在另一个元素之上），否则不要使用它

其次，

height:100%

并不能做你直觉上认为它能做的事情。将菜单div的高度设置为视口高度（浏览器窗口）的100%，而不是整个页面的100%

由于你的菜单有一个简单的背景，有一个巧妙的技巧，你可以使用它来使它看起来是相同的高度

我在菜单和内容周围添加了一个包装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>

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

以下几点提示：

注意高度：100%

float:left

或

float:right

固有设置

显示：块

。无法将

显示：内联设置为打开
浮动元素


首先，position:absolute
可能是一件非常糟糕的事情。除非试图将元素从页面流中移除（使一个元素出现在另一个元素之上），否则不要使用它
其次，height:100%
并不能做你直觉上认为它能做的事情。将菜单div的高度设置为视口高度（浏览器窗口）的100%，而不是整个页面的100%
由于你的菜单有一个简单的背景，有一个巧妙的技巧，你可以使用它来使它看起来是相同的高度
我在菜单和内容周围添加了一个包装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>

所以整个东西都是灰色背景。您的菜单向左浮动（在灰色背景上）。contentuo div的左边距为192px，用于“清除”菜单，而白色背景用于隐藏灰色。包装器和内容div以及灰色/白色背景将扩展到内容的大小
以下几点提示：

注意高度：100%

float:left

或

float:right

固有设置

显示：块

。无法将

显示：内联设置为打开
浮动元素


我认为完成您要完成的任务的最简单方法是将所有内容放入包装器div中，如下所示：
<div class="wrapper"> 
    <div class="Fascione">...</div>
    <div class="Menu">...</div>
    <div class="Contenuto">...</div>
</div> 


...
...
...

然后高度：100%在菜单上，最小高度在菜单和内容上。
我认为完成您要完成的任务的最简单方法是将所有内容放入包装器div中，如下所示：
<div class="wrapper"> 
    <div class="Fascione">...</div>
    <div class="Menu">...</div>
    <div class="Contenuto">...</div>
</div> 


...
...
...

然后高度：100%在菜单上，最小高度在菜单和内容上。
查看如何制作“简单”等高列的详细信息。这是一种非常方便的技术。谢谢，这也很有用；我仍然在做实验，以便在实践中学习。查看有关如何制作“简单”等高柱的详细信息。这是一种非常方便的技术。谢谢，这也很有用；我仍然在做实验，以便在实践中学习。我会避免给出这样的建议：立场：绝对是一件非常糟糕的事情。尽可能避免。很多情况下，位置：绝对是一件好事，也是一件必须的事。使用position:absolute并声明它是一件非常糟糕的事情绝对没有错。哦。。。我的评论还没说完。我想使用float，但在将浏览器窗口调整为较小尺寸时，我不希望我的“Contenuto”页面在菜单下移动。而且在这种情况下，我的菜单也不会降到100%。有没有关于如何给div指定“页面”高度的提示？我也试着在没有帮助的情况下降低身高；为什么min width会起作用呢？Jason，我知道你的意思，但我见过太多的web开发人员使用绝对定位，就像这是自切片面包以来最好的东西一样，并且绝对定位所有东西。它会将内容从页面流中移除，而页面流通常会打断您的页面。但是，当你想从页面的流程中去掉一些东西时，这是非常棒的：P。不过，编辑是为了反映。我想“尽可能避免”是相当苛刻的。哦，是的，忘了我加了那个。这是CSS的一个特性，叫做。基本上，p
元素的上边距为15px。由于边距塌陷，15px边距反而“塌陷”并应用于周围的div，从而形成您看到的15px间距。如果应用填充（即使仅1px），则禁用边距折叠。从技术上讲，您需要在顶部和底部填充1px，在左侧填充17px；我也在右边加了1px。我会避免给出这样的建议：位置：绝对是一件非常糟糕的事情。尽可能避免。很多情况下，位置：绝对