Question

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

文件：

test2.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>

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;
}

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

如果我使用Firebug booth查看页面，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;
}

有谁知道为什么会这样，以及如何避免它？

Answer 1

这应该对你有所帮助： CSS Adjust Parent DIV size if Absolute Child DIV falls outside boundaries 虽然我猜你仍然与<p>标签有冲突。我想min-height可以帮到你。

body标签不显示（调整大小）可控制

1 个答案: