3

私はこの構造を持っています：

<body>

    <div id="header">..</div>

    <div id="content">..</div>

    <div id="footer">..</div>

</body>

そしてこのCSS：

本体{色：白; font-family：'Play'、sans-serif; 最大幅：2560px; マージン：0自動; 最小幅：960px; 高さ：100％; パディング：0; }

#header {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    min-width: 960px;
    height: 95px;
    background-image: url("../images/header-bg.png");
}

#content {
    margin: 0 auto;
    position: relative;
    max-width: 1600px;
    height:100%;
    overflow:hidden;
}

#footer {
  background-color: #009EDB;
  background-image: url("../images/footer-bg.png");
  bottom: 0;
  height: 30px;
  margin: 0;
  position: relative;
  width: 100%;

}​

ただしbody、ブラウザウィンドウの高さは100％ではありません。私の問題は何ですか？ありがとう。

jsFiddle

4

3 に答える 3

6

追加：

html {
    height: 100%;
}

あなたのCSSに。

ここで更新を参照してください-http://jsfiddle.net/xkTpV/4/

于 2012-12-14T14:02:46.440 に答える
4

それを機能させるために。親<html>と子の<body>両方の高さが 100% になるようにする必要があります。

html, body {
    height:100%; /*both html and body*/
}
body {
    margin: 0; /*reset default margin*/
}
于 2012-12-14T15:15:52.530 に答える