有问题的css div高度百分比

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

我目前正在写一个留言簿在php与html模板，但我有问题，我的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还很陌生，但我会欢迎每一个我能得到的帮助。提前谢谢。

如果你想看看这个页面现在的样子，点击这里。请注意，并不是所有的工作都是正确的，但如果你想注册自己，你非常欢迎测试一下。

编辑:

由于William的想法，我不得不稍微改变了一下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%;
}

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

编辑2

我必须添加，目前我有一个滚动条上的whity_layer，如果内容溢出(溢出:auto)，我无法摆脱暂时…我发现的每个自制尝试都不能与我的标记一起工作……在我看来，现在使用css隐藏滚动条应该更容易了。

我需要改变什么，使#wrap_main总是和它的内容一样大?

你不需要使用height或min-height来让#wrap_main总是和它的内容一样大

如何让我的#content(或#wrap_content)适应内容(包括文本和图像)的高度?

把height和min-height从CSS中去掉

我需要在html标记中改变一些东西吗?

不完全是，只是改变CSS。

这是一个没有height和min-height的jsfiddle，它会根据内容调整高度。

编辑:

如果你只需要一个白色的背景，你可以考虑这样:

创建一个新的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
}

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

祝你好运!

相关内容

最新更新

热门标签：