1
尽管其他人有相同的问题，我仍然无法得到它的工作，所以我真的需要你的帮助。与CSS div高度百分比问题
我目前正在用html模板在php中写一个留言簿，但我有问题，我的div不使用我设置的最小高度属性，如果他们是百分比。我想让整个页面响应所有的分辨率和窗口大小，这就是为什么我试图避免固定的高度。
以下是我的HTML标记：
<!DOCTYPE html>
<html>
<head>
<link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet">
<title><?=$GuestbookTitle ?></title>
</head>
<body>
<div id="wrap_main">
<div class="menubar">
<ul class="menubar_list">
<a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist,
other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink -->
<li class="menubar_item" id="int"><span id="menubar_text">Home</span></li>
</a>
<?=$MenuPagesString ?>
</ul>
<?=$MenuPagesStringExt ?>
</div> <!-- menubar -->
<div id="wrap_header">
<div id="logoplacer">
<a href="http://wikitest.gutknecht-informatik.com">
<img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/>
</a>
</div> <!-- logoplacer -->
<div id="profileplacer">
<?= $ProfilePlacer ?>
</div> <!-- profileplacer -->
</div> <!-- wrap_header -->
<div id="wrap_content">
<div id="content">
<div id="content_title">
<h2><?=$CurrContentTitle ?></h2>
</div> <!-- content_title -->
<div id="content_text">
<?=$CurrContentText ?>
</div> <!-- content_text -->
</div> <!-- content -->
</div> <!-- wrap_content -->
<div id="wrap_footer">
© by Kathara
</div> <!-- wrap_footer -->
</div> <!-- wrap_main -->
</body>
</html>
正如我的CSS文件是相当大的我只会给你重要的部分：
*{
font-family:sans-serif;
font-size:12pt;
color:white; /*003300*/
padding: 0;
margin: 0;
list-style: none;
}
html {
position: absolute;
background-image: url('/../data/images/03.jpg');
background-attachment: fixed;
min-height:100%;
width:100%;
}
body {
height:100%;
width:calc(70% - 2px);
margin-left: calc((30% - 2px)/2);
position: absolute;
}
#wrap_main {
background: rgba(255,255,255,0.7);
width: 100%;
min-height: 100%;
}
#wrap_content {
display: inline-block;
position: relative;
left: 190px;
margin-top: calc(1% + 4px);
width: calc(100% - 200px);
background: #1e1e1e;
min-height: 100%;
margin-bottom: 10px;
}
#content{
position: relative;
color: white;
margin: 5px auto 10px;
height: 100%;
min-height: 550px;
width: 95%;
}
如果您需要更多产品，请在评论中写下。我很抱歉，如果代码有点乱，但我还没有清理它...
我的问题是，#wrap_content和#content不能有百分比高度，我不知道为什么，但它不会工作。
我在路上的某个地方犯了一个错误，只是没有看到它吗？ 我需要更改哪些内容，以便#wrap_main始终与内容一样大？如何让我的#content（或#wrap_content）适应内容的高度（包括文本和图像）？ 我是否需要改变html标记中的内容？
如果您发现任何可以做得更好的事情，请告知。我对php，html和css仍然很陌生，但我会欢迎所有可以获得的帮助。提前致谢。
如果您想查看当前页面的样子，请点击here。请注意，并非所有事情都能正常工作，但如果您想自己注册，则非常欢迎您对其进行测试。
编辑：
我不得不改变HTML的标记一点，再适应的CSS颇有几分感谢威廉的想法，感谢：
<!DOCTYPE html>
<html>
<head>
<link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet">
<title><?=$GuestbookTitle ?></title>
</head>
<body>
<div id="whity_layer">
<div id="wrap_main">
<div class="menubar">
<ul class="menubar_list">
<a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist,
other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink -->
<li class="menubar_item" id="int"><span id="menubar_text">Home</span></li>
</a>
<?=$MenuPagesString ?>
</ul>
<?=$MenuPagesStringExt ?>
</div> <!-- menubar -->
<div id="wrap_header">
<div id="logoplacer">
<a href="http://wikitest.gutknecht-informatik.com">
<img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/>
</a>
</div> <!-- logoplacer -->
<div id="profileplacer">
<?= $ProfilePlacer ?>
</div> <!-- profileplacer -->
</div> <!-- wrap_header -->
<div id="wrap_content">
<div id="content">
<div id="content_title">
<h2><?=$CurrContentTitle ?></h2>
</div> <!-- content_title -->
<div id="content_text">
<?=$CurrContentText ?>
</div> <!-- content_text -->
</div> <!-- content -->
</div> <!-- wrap_content -->
<div id="wrap_footer">
© by Kathara
</div> <!-- wrap_footer -->
</div> <!-- wrap_main -->
</div> <!-- whity_layer -->
</body>
</html>
和CSS：
*{
font-family:sans-serif;
font-size:12pt;
color:white; /*003300*/
padding: 0;
margin: 0;
list-style: none;
}
html {
position: absolute;
background-image: url('/../data/images/03.jpg');
background-attachment: fixed;
min-height:100%;
width:100%;
z-index: -1;
}
body {
height: 100%;
max-height:auto;
width:100%;
position: relative;
z-index: 0;
}
#whity_layer {
background: rgba(255,255,255,0.7);
margin-left: calc((30% - 2px)/2);
width: calc(70% - 2px);
height: 100%;
position: fixed;
overflow: auto;
z-index: 1;
}
#wrap_main {
width: 100%;
min-height: 100%;
}
#wrap_content {
display: inline-block;
position: relative;
left: 190px;
top: 45px;
width: calc(100% - 200px);
background: #1e1e1e;
min-height: 100%;
margin-bottom: 10px;
}
#content{
position: relative;
color: white;
margin: 5px auto 10px;
height: 100%;
min-height: 100%;
width: 95%;
}
我还没有决定内容包装的最小高度，但我会弄清楚。
EDIT 2
我要补充的是，目前我对whity_layer滚动条如果内容溢出：这我不能得到暂时摆脱（溢出自动）。 ..我发现每一个自制尝试不会与我的标记...现在应该更容易隐藏滚动条与CSS在我看来...
你可以在子元素上使用'position：relative'，'position：absolute'和'top：0'，'bottom：0'在子元素上 – MartijnICU
对不起。没有足够好地阅读你的问题，并且认为你想使用父元素中的所有可用空间。主要是因为'min-height'中的百分比值指定了与父容器相关的高度。 – MartijnICU
是的，我知道，但即使我将一个div高度设置为70％，并且它是100％的孩子，它也不起作用。 #wrap_main显示一个非常短的div，我想不出为什么父母的身高设置为100％的原因。只有当我使用固定高度时，最小高度属性才起作用.... – Kathara