1

ヘッダー、ページ、フッターに分割された Web ページがあります。

問題は、私がそのページを作ったことですheight :auto;。しかし、それは機能せず、ページを自動的に拡大する必要があります。

これは私がCSSに持っているものです:

/* Page */

#page-wrapper {
    overflow: auto;
    height: auto;
    text-align: center;
}

#page {
    overflow: auto;
    width: 1120px;
    margin: 0px auto;
    padding: 50px 40px;
    color: #8F8F8F;
    min-height:700px;
    height:auto;

}

そしてHTML：

<body>
<div id="banner">
  <div class="img-border">
    <div id="header-wrapper">
      <div id="header">      
        <div id="logo">
        </div>
       </div>
      </div>
     </div> 
    </div>
<div id="wrapper">
  <div id="page-wrapper">
    <div id="page">
      <div id="wide-content">
      </div>
    </div>
  </div>
</div>
4

3 に答える 3

2

あなたが何を望んでいるのかは非常に不明確です。

最初の行でフッターが必要だと言っていますが、HTML と CSS にはフッターが表示されません。

ページの下部に固定するフッターが必要な場合は、CSS Sticky Footerをご覧ください。

于 2013-05-10T23:11:15.397 に答える
0

そこに高さはまったく必要ありません... divは、その中のコンテンツの量に応じて拡大または縮小します。height: auto; を削除してみてください。完全に。

十分なコンテンツがない場合でも、コンテンツ セクションをページの高さの 100% にしたいという意味であれば、ブラウザ ウィンドウの div を 100% の高さにするのに役立ちます。

于 2013-05-10T22:53:24.437 に答える
0

ページのフッターを一番下に置き、その間の div を残りのスペースにするということですか (文言から判断するのは少し難しいです)。

これがあなたの望むものなら、次のブログ投稿を見ることをお勧めします: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

HTML 要約:

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS の概要:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
于 2013-05-10T23:09:51.997 に答える