1

当我遇到一个我根本无法解决的问题时，我只是在测试一些基本的 html 和 css 东西。

文件：

测试2.html：

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8" />
   <link rel="stylesheet" href="test2.css">
 </head>
 <body class="design1">
  <div id="container">
   <div id="menu" class="box">
     <a href="test2.html#text1" class="box">Abschitt 1</a>
     <a href="test2.html#text2" class="box">Abschitt 2</a>
     <a href="test2.html#text3" class="box">Abschitt 3</a>
   </div>
   <div id="main" class="box">
    <div id="header" class="box">
      <span class="box head">Test2</span>
      <span class="box head">Überschrift</span>
      <span class="box head">10.09.2012</span>
    </div>
    <div id="text" class="box">
     <p id="text1" class="box">
       Lorem ipsum ...
     </p>
     <p id="text2" class="box">
       Lorem ipsum...
     </p>
     <p id="text3" class="box">
       Lorem ipsum...
     </p>
    </div>
    <div id="footer" class="box">
      Von ####
    </div>
   </div>
  </div>
 </body>
</html>

测试2.css：

html, body, div, span {
    background: none repeat scroll 0% 0% transparent;
    border: 0px none;
    font-size: 100%;
    margin: 0px;
    padding: 0px;
    outline: 0px none;
    vertical-align: baseline;
}

.box {
    background: rgba(0, 0, 67, 0.2);
    border-color: rgba(0, 0, 67, 1.0);
    border-width: 1px;
    border-style: solid;
}

#menu {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 200px;
    bottom: 5px;
}

#main {
    position: absolute;
    left: 210px;
    top: 5px;
    right: 5px;
    bottom: 5px;
}

如果我查看带有 Firebug 展位的页面，则 html 和 body 元素的大小为 0px 乘以 100%（宽度）并且不可见（但是显示了 innerHTML 部分）。如果我删除最后一个样式规范，但是它们会跳回到正常行为并具有整个页面的大小（100% 乘以 100%）。

删除最后一个规范后的 test2.css：

html, body, div, span {
    background: none repeat scroll 0% 0% transparent;
    border: 0px none;
    font-size: 100%;
    margin: 0px;
    padding: 0px;
    outline: 0px none;
    vertical-align: baseline;
}

.box {
    background: rgba(0, 0, 67, 0.2);
    border-color: rgba(0, 0, 67, 1.0);
    border-width: 1px;
    border-style: solid;
}

#menu {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 200px;
    bottom: 5px;
}

有谁知道为什么会发生这种情况以及如何避免它？

4

1 回答 1

0

这应该对您有所帮助： 如果绝对子 DIV 超出边界，则 CSS 调整父 DIV 大小 虽然我猜您仍然与<p>标签有冲突。我想min-height可以帮助你。

于 2012-09-10T23:17:06.817 回答