3

スティッキー フッターのある CSS レイアウトがあります。サイトの主要部分は、いくつかのサイドバーとコンテンツ ボックスです。しかし、コンテキストボックスも周囲のdivも「100%」の高さまで拡大できないようです。

コンテンツ ボックスに短いテキストが含まれる場合、高さ全体にまたがることはありません。また、テキストが多く含まれる場合、周囲の div は広がりません。

その結果、コンテンツ ボックスとフローティング背景がフッターのすぐ上のページの下部に展開されるサイトになります。

編集: #inner に "overflow: hidden" を追加すると、長いコンテンツで背景が整列しない問題が修正されます。しかし、#content div をページ全体の高さまで拡張することはまだできません。

http://jsfiddle.net/s6yf3/ (ウィキペディアのロゴは視覚化のためのものです)

<div id="wrapper">
  <div id="inner">   
    <header>
      <a href="#">
        <img src="//upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" alt="Logo" width=400 height=100 />
      </a>
      <nav>
        <ul>
          <li><a href="#">Menu1</a></li>
          <li><a href="#">Menu2</a></li>
        </ul>
      </nav>
    </header>
    <div id="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec libero vitae massa bibendum molestie ac non justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent in dui arcu, nec ornare nibh.
    </div>
    <div id="sidebar">
      <div>Element</div>
      <div>Element</div>
      <div>Element</div>
    </div>
  </div>
</div>
<div id="footer">
  <p>Sticky Footer</p>
</div>
body {
  margin:0;
  padding:0;
  background:#eee;
}

html,body {
  height:100%; 
}

#wrapper {
  width:400px;
  height: auto !important;
  height:100%;
  margin:0 auto;
  min-height:100%;
}

#inner {
  height: 100%;
  padding:0 0 55px 0;
  background-color: #ccc;
  background-image: url(//upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png);
  background-repeat: repeat-x;
  background-position: right bottom;
  overflow: hidden;
}

#inner p {
  margin:1em 1em 0;
  padding:.15em .25em;  
}

#inner header {
  margin: 0; 
  padding: 0;
  height: 160px;
}

#wrapper header nav ul {
  list-style-type: none;
  margin-top: 4px;
  padding-left: 240px;
  height: 46px !important;
  z-index: 999;
  position: absolute;
}

#wrapper header nav ul li {
  display: inline-block;
}

#wrapper header nav ul li a {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  height: 40px !important;
  line-height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  text-decoration: none;
  display: block;
}

#wrapper header nav ul li a:hover {
  background-color: #333 !important;
  color: #fff;
  z-index: 2;
}

#wrapper header nav ul li.active a {
  font-size: 18px;
  font-weight: bold;
  background-color: #333 !important;
  color: #fff;
  height: 46px !important;
  line-height: 46px;
  display: block !important;
  padding-left: 10px;
  padding-right: 10px;
  text-decoration: none;
}

#sidebar div {
  width: 100px;
  min-height: 60px;
  background-color: #ddd;
  margin-bottom: 20px;
}

#content {
  width: 250px;
  height: 100%;
  position: relative;
  float: right;
  background-color: #ddd;
}

#footer {
    width:400px;
    height:55px;
    margin:-55px auto 0;
    background:#222;
    overflow:hidden;
}

#footer p{
    margin:0;
    padding:.5em 0 0;
    font-weight:bold;
    text-align:center;
    color:#FFF;
}
4

2 に答える 2

0

#inner と #wrapper の高さは 100% であるため、#footer を #inner 内に配置し、#inner から 65px の下部パディングを削除しました。

jFiddle: http://jsfiddle.net/rPGTq/

<div id="wrapper">
  <div id="inner">   
    <header>
      ...
    </header>
    <div id="content">
      ...
    </div>
    <div id="sidebar">
      ...
    </div>
    <div id="footer">
      <p>Sticky Footer</p>
    </div>
  </div>
</div>
于 2013-02-17T18:16:34.557 に答える