1

まったく解決できない問題に遭遇したとき、いくつかの基本的な 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 ブースでページを見ると、html と body 要素が 0px × 100%(width) のサイズで表示されません (ただし、innerHTML の部分は表示されます)。ただし、最後のスタイル仕様を削除すると、通常の動作に戻り、ページ全体のサイズ (100% x 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

これはあなたに少し役立つはずです: CSS 絶対子 DIV が境界外にある場合、親 DIV のサイズ<p>を調整しますが、まだタグ と競合していると思います。私はmin-heightあなたを助けることができると思います。

于 2012-09-10T23:17:06.817 に答える