Question

尽管其他人遇到同样的问题我仍然无法让它工作，所以我真的需要你的帮助。

我目前正在使用html模板在php中写一个留言簿，但我有一个问题，即我的div不使用我设置的min-height属性（如果它们是百分比）。我想让整个页面对所有分辨率和窗口大小做出响应，这就是为什么我要避免固定的高度。

以下是我的html-markup：

<!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-markup中更改某些内容？

如果您发现其他任何我可以做得更好的事情，请告知。我仍然是php，html和css的新手，但我会欢迎我能得到的每一个帮助。提前谢谢。

如果您想查看目前页面的内容，请点击here。请注意，并非所有设备都能正常工作，但如果您想自行注册，我们非常欢迎您对其进行测试。

编辑：

由于威廉的想法，我不得不稍微改变html-markup并调整了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%;
}

我还没有决定内容包装器的最小高度，但我会弄清楚。

编辑2

我必须补充说，目前我在whity_layer上有一个滚动条，如果内容溢出（溢出：自动），我暂时无法摆脱...我发现的每次自制尝试都不会使用我的标记...现在我认为用css隐藏滚动条应该更容易......

Answer 1

我需要更改什么，以便#wrap_main始终与内容一样大？

您无需使用height或min-height即可使#wrap_main始终与内容一样大。

如何让我的#content（或#wrap_content）适应内容的高度（包括文字和图片）？

只需从CSS中取出height和min-height

我是否需要更改html-markup中的内容？

不是，只需更改CSS。

以下是jsfiddle，而CSS上没有height和min-height，会根据内容调整其高度。

编辑：

如果你只需要一个whity背景，你可能会考虑这个：

创建一个新的div #whity_layer并在所有其他divs之前将其设为绝对值：

<body>
  <div id="whity_layer"></div>
  <div id="wrap-main"></div>
  .........

将CSS更改为：

body {
  position: relative;
}

#whity_layer {
  background: rgba(255,255,255,0.7);
  position: absolute;
  width: 100%;
  height: 100%;
}

#wrap_main {
  // Remove background
}

Answer 2

前一段时间我试图找到一个css替代方案，让我的div总是和它的内容一样大，但只要我记得那太可怕/难，我很抱歉我不能真的回答你，但是如果你想尝试另一种方法，你可以使用AngularJs，例如ng-style，这样你就可以给你的div一个“动态”大小。剩下的就是算法:)。

祝你好运伴侣：3

有css div高度百分比的问题

2 个答案: