6

高さに合わせて自動調整されるアプリ ページを作成しようとしています。ページで使用されている HTML コードに続く

<div id="main" role="main">
<header class="header">
    <div class="allPageHeaderImg"></div>
    <div class="logo"><img src="images/logo-viva.png" alt="VIVAGREL Logo" /></div>
</header>
<section class="allContent">
    <div class="button-links-subpg">
        <ul class="buttons">
            <li><a href="#"><img src="images/graceButton.png" alt="cardiac-button" /></a></li>
            <li><a href="#"><img src="images/timiButton.png" alt="cardiac-button" /></a></li>      
        </ul>
    </div>
</section>
<footer id="footer">
    <div id="footerBg">
        <div class="footer-links">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html">Back</a></li>
            </ul>
        </div>
    </div>
</footer>
</div>

使用したCSS

html {
  height:100%!important;
  width:100%;
  padding:0;
  margin:0;
}

body {
  margin:0;
  padding:0;
  width:100%;
  height:100%!important;
}

#main {
  height:100%;
  margin:100%;
  margin:0 auto;
  padding:0;
  background:#fff;
}

.header {
  height:145px;
  width:100%;
  background:url(../images/header-repbg-320.png) left top repeat-x;
  display:block;
  display:inline-block;
}

.allContent {
  width:100%;
  border:0 solid green;
  height:100%;
  min-height:100%;
  vertical-align:middle;
  display:block;
  display:inline-block;
}

#footer {
  background:url(../images/footer-repbg-320.png) bottom left repeat-x;
  height:90px;
  width:100%;
  display:block;
  display:inline-block;
}

私の問題は、ページ全体がページの高さの半分しか消費せず、フッターの下にぎこちないスペースが残っていることです。

質問: コンテンツを自動的にページの高さに合わせるにはどうすればよいですか?

4

3 に答える 3

0 
＃主要 {

    高さ：100％;
    幅：100％;
    マージン：0自動;
    パディング：0;
    背景：#fff;
    位置：相対;

}

.header {

    位置：絶対;
    top：0px;
    左：0px;
    右：0px;
    高さ：145px;
    幅：100％;
    background：url（../ images / header-repbg-320.png）左上の繰り返し-x;
    表示ブロック;
    display：inline-block;

}

.allContent {

    位置：絶対;
    top：145px;
    左：0px;
    右：0px;
    下：90px;
    幅：100％;
    border：0緑色に点灯;
    表示ブロック;
    display：inline-block;
    オーバーフロー：自動;

}

#footer {

    位置：絶対;
    下：0px;
    左：0px;
    右：0px;
    background：url（../ images / footer-repbg-320.png）左下repeat-x;
    高さ：90px;
    幅：100％;
    表示ブロック;
    display：inline-block;

}
于 2012-11-19T11:47:24.077 に答える
0

あなたはほとんどそれを持っていました。最初の 3 つのセレクターの CSS を次のように単純に修正しました。

html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#main {
    margin: auto;
    min-height: 100%;
    background: #ccc;
    width: 960px;
    border-left: 1px solid #aaa;
    border-right: 1px solid #aaa;
}

背景、幅、境界線のみを #main セレクターに追加して、機能していることを示しました。これらのプロパティがなくても機能しますが、margin と min-height が必要です。また、!important 値が不要であり、ベスト プラクティスとして、主に継承との競合のトラブルシューティングに使用する必要があることにも気付くでしょう。

これが役立つことを願っています。

于 2012-07-25T03:08:05.963 に答える