2

私は立ち往生しており、解決方法がわかりません。スティッキー フッターがありますが、問題なく動作します。しかし、フッターの幅は 100% にしたいです。そのため、フッターを下部にプッシュする外側の div と中央に配置されたコンテンツ div があります。

通常、外側の div 全体の背景色を設定します。これは、ヘッダー、コンテンツ、フッターの背景色が同じであることを意味します。各 div に対して、白 (オーバーレイ) をオーバーライドするカスタム カラーを設定できます。

レイアウトの幅が 100% になったため、フッターまでプッシュされる背景色のコンテンツ div を取得できません。

レイアウト、outer_content は赤、コンテンツは白、一番下までフロートする必要があります

私の前の話は少し複雑でした。質問を短く/明確にします。ヘッダーとフッターの幅を 100% にして、コンテンツを中央に配置し、フッターまで背景色を白にするにはどうすればよいですか? 注: コンテンツは、高さ 100% として拡大または縮小することができます。

これが私の使用したHTMLです：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <title>Temp</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
  <link rel="stylesheet" type="text/css" href="style.css" />
</head> 
<body>
<div id="outer">
  <div id="outer_header">
    <div id="header">
      <div id="menu_block"></div>
      <div id="image_block"></div>
    </div>
  </div> 
  <div id="outer_content">
    <div id="content"> 
    dafdafdafda
    </div> 
  </div>
  <div id="clearfooter"></div> 
  <div id="outer_footer">Footer - | |- Footer </div> 
</div> 
</body> 
</html>

そして私のCSS

/* mac hide\*/ 
html, body {height:100%} 
/* end hide */ 
body { 
  padding:0; 
  margin:0; 
  text-align:center; /* for ie6 and under */ 
  min-width:1024px;
  background-color: #eee8d8; 
  color: #000000;
} 
#outer { 
  min-height:100%;
  min-width:1024px; 
  width:100%; /* add 2px if borders are not used */ 
  text-align:left; 
  margin:auto; 
  position:relative; 
} 

* html #outer{height:99.9%;} /*For ie as treats height as min-height anyway - also addreeses rounding bug at bottom of screen in IE*/ 
#outer_header { 
  height:280px;
  width:100%;
  float:left; 
  position:relative;
  background-color:#1f4c3f;
}  

#header { 
  height:280px;
  width:1000px;
  margin:auto;
  position:relative;
}

#menu_block {
  width:1000px;
  height:90px;
}

#image_block {
  width:1000px;
  height:190px;
  background-color:#FFFFFF;
}

#outer_content {
    width:100%;
    position:relative;
    float:left;
  background-color:red;
}

#content { 
  width:1000px;
  height:100%;
  position:relative;  
  margin:auto;
  background-color:#FFFFFF;
}

#outer_footer { 
  width:100%; /* add 2px if borders are not used on the #outer div */ 
  clear:both; 
  height:50px; 
  background-color:#1f4c3f;  
  left:0; 
  bottom:0; 
  position: absolute; 
} 
* html #outer_footer {/*only ie gets this style*/ 
  \height:52px;/* for ie5 */ 
  he\ight:50px;/* for ie6 */ 
  margin-bottom:-1px; 
} 
div,p  {margin-top:0}/*clear top margin for mozilla*/ 

#clearfooter {width:100%;height:52px;clear:both} /* to clear footer */

Ps。可能であれば CSS のみを使用し、javascript は使用しません

編集：結果はどうあるべきか

正しいレイアウト

ご覧のとおり、画像 1 には 1 行の白があります (テキストがそこで終わっているため) が、スティッキー フッターまでコンテンツを埋めたい...

4

1 に答える 1

0

これにより、希望するスクロール動作に応じて 3 つのソリューションが提供されます。

  1. スクロールバーのないJSFiddle ソリューション:

    マークアップ:

    <div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

    スタイルシート:

    body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
body {
    background: red;
}
#header {
    height: 160px;
    background: #1f4c3f;
}
#content {
    position: absolute; 
    background: white;
    width: 500px;
    top: 160px;
    bottom: 40px;
    left: 50%;
    margin-left: -250px;
}
#footer {
    position: absolute;
    bottom: 0;
    background: #1f4c3f;
    width: 100%;
    height: 40px;
}

  2. 垂直スクロールバーとフッターが常に表示されるJSFiddle ソリューション:

    マークアップ:

    <div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

    スタイルシート:

    body, html {
    margin: 0;
    padding: 0;
    width: 100%;
}
body {
    background: url('http://i.stack.imgur.com/WcYOv.png') center repeat-y;
}
#header {
    height: 160px;
    background: #1f4c3f;
}
#content {
    width: 500px;
    margin: 0 auto;
}
#footer {
    position: fixed;
    bottom: 0;
    background: #1f4c3f;
    width: 100%;
    height: 40px;
}

  3. 垂直スクロールバーと移動フッターを備えたJSFiddle ソリューション:

    マークアップ:

    <div id="wrap">
    <div id="header"></div>
    <div id="content"></div>
</div>
<div id="footer"></div>

    スタイルシート:

    body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
#wrap {
    background: url('http://i.stack.imgur.com/WcYOv.png') center repeat-y;
    width: 100%;
    min-height: 100%;
}
#header {
    height: 160px;
    background: #1f4c3f;
}
#content {
    width: 500px;
    margin: 0 auto;
    padding-bottom: 40px;
}
#footer {
    position: relative;
    top: -40px;
    background: #1f4c3f;
    width: 100%;
    height: 40px;
}
于 2013-03-16T23:00:11.607 に答える