81

私はこの問題を理解しようと何時間も頭を壁にぶつけてきましたが、それは私が見逃している小さなものに違いないと思います。オンラインで検索しましたが、見つかったものは何もないようです。HTML は次のとおりです。

<body>
  <div id="header">
    <div id="bannerleft">
    </div>

    <div id="bannerright">
      <div id="WebLinks">
        <span>Web Links:</span>
        <ul>
          <li><a href="#"><img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/></a></li>
          <li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/></a></li>
          <li><a href="#"><img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/></a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="Sidebar">
    <div id="SidebarBottom">
    </div>
  </div>
  <div id="NavigationContainer">
    <ul id="Navigation">
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
    </ul>
  </div>
  <div id="Main">
    <!-- content -->
  </div>
</body>

私の完全なCSSは次のとおりです。

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: Calibri, Sans-Serif;
  height: 100%;
}

#header {
  width: 100%;
  z-index: 1;
  height: 340px;
  background-image: url("../../Content/images/bannercenter.gif");
  background-repeat: repeat-x;
}

#header #bannerleft {
  float: left;
  background-image: url("../../Content/images/bannerleft.gif");
  background-repeat: no-repeat;
  height: 340px;
  width: 439px;
  z-index: 2;
}

#bannerright {
  float: right;
  background-image: url("../../Content/images/bannerright.gif");
  background-repeat: no-repeat;
  width: 382px;
  height: 340px;
  background-color: White;
  z-index: 2;
}

#Sidebar {
  width: 180px;
  background: url("../../Content/images/Sidebar.png") repeat-y;
  z-index: 2;
  height: 100%;
  position: absolute;
}

#SidebarBottom {
  margin-left: 33px;
  height: 100%;
  background: url("../../Content/images/SidebarImage.png") no-repeat bottom;
}

#NavigationContainer {
  position: absolute;
  top: 350px;
  width: 100%;
  background-color: #bbc4c3;
  height: 29px;
  z-index: 1;
  left: 0px;
}

#Navigation {
  margin-left: 190px;
  font-family: Calibri, Sans-Serif;
}

#Navigation li {
  float: left;
  list-style: none;
  padding-right: 3%;
  padding-top: 6px;
  font-size: 100%;
}

#Navigation a:link, a:active, a:visited {
  color: #012235;
  text-decoration: none;
  font-weight: 500;
}

#Navigation a:hover {
  color: White;
}

#WebLinks {
  float: right;
  color: #00324b;
  margin-top: 50px;
  width: 375px;
}

#WebLinks span {
  float: left;
  margin-right: 7px;
  margin-left: 21px;
  font-size: 10pt;
  margin-top: 8px;
  font-family: Helvetica;
}

#WebLinks ul li {
  float: left;
  padding-right: 7px;
  list-style: none;
}

#WebLinks ul li a {
  text-decoration: none;
  font-size: 8pt;
  color: #00324b;
  font-weight: normal;
}

#WebLinks ul li a img {
  border-style: none;
}

#WebLinks ul li a:hover {
  color: #bcc5c4;
}

ページのコンテンツに合わせてサイドバーの高さを伸ばし、サイドバーの下部の画像を常にサイドバーの下部に置いておきたいです。

4

16 に答える 16

97

これは私のために働いた

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -5000px; /* any large number will do */
  padding-bottom: 5000px; 
  .... 
}
于 2011-12-09T20:44:34.323 に答える
32

CSS のフレックスボックスが主流になるまでは、サイドバーを上下から 0 ピクセル離して配置し、メイン コンテナーにマージンを設定して補うことができます。

JSFiddle

http://jsfiddle.net/QDCGv/

HTML

<section class="sidebar">I'm a sidebar.</section>

<section class="main">I'm the main section.</section>

CSS

section.sidebar {
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: green;
}

section.main { margin-left: 250px; }

注bottom: これは非常に簡単な方法ですが、「ページの下部」ではなく「ウィンドウの下部」を意味することがわかります。メイン コンテンツが下にスクロールすると、サイドバーはおそらく突然終了します。

于 2012-12-28T17:02:56.047 に答える
29

更新：この回答はまだ賛成票と反対票の両方を獲得しており、執筆時点で8歳です。おそらく、より優れた手法が現在出回っています。元の回答は以下のとおりです。

明らかに、あなたはフェイクカラムテクニックを探しています:-)

height: 100%高さプロパティの計算方法により、自動高さを持つものの中に設定することはできません。

于 2009-04-26T17:32:38.690 に答える
14

CSS テーブルを使用して、サイドバーの高さを 100% にします。

基本的な考え方は、サイドバーとメイン div をコンテナーにラップすることです。

コンテナにdisplay:table

そして、2 つの子 div (サイドバーとメイン) にdisplay: table-cell

そのようです..

#container {
display: table;
}
#main {
display: table-cell;
vertical-align: top;
}
#sidebar {
display: table-cell;
vertical-align: top;
}

上記の手法を使用して最初のマークアップを変更したこのLIVE DEMOを見てください (どの div がどれであるかがわかるように、さまざまな div に背景色を使用しています)

于 2013-01-17T10:31:39.373 に答える
9

フレックスボックス ( http://caniuse.com/#feat=flexbox )

最初に、必要な列を div またはセクションでラップします。例:

<div class="content">
    <div class="main"></div>
    <div class="sidebar"></div>
</div>

次に、次の CSS を追加します。

.content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
于 2015-09-17T21:00:29.910 に答える
5

@montrealmike の回答に加えて、適応を追加できますか?

これは私がしました：

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -101%;
  padding-bottom: 101%; 
  .... 
}

誰かが高さ 5000 ピクセルを超える巨大な画面でサイトを閲覧している可能性がある (非常にまれな) 可能性に対応するために、「101%」のことを行いました。

素晴らしい答えですが、モントリオールマイク。それは私にとって完璧に機能しました。

于 2014-02-01T18:29:09.997 に答える
4

さまざまなプロジェクトでこの問題に何度か遭遇しましたが、自分に合った解決策を見つけました。サイドバー、メイン コンテンツ、フッターを含む 4 つの div タグを使用する必要があります。

まず、スタイルシートで要素のスタイルを設定します。

#container {
width: 100%;
background: #FFFAF0;
}

.content {
width: 950px;
float: right;
padding: 10px;
height: 100%;
background: #FFFAF0;
}

.sidebar {
width: 220px;
float: left;
height: 100%;
padding: 5px;
background: #FFFAF0;
}

#footer {
clear:both;
background:#FFFAF0;
}

必要に応じてさまざまな要素を編集できますが、フッターのプロパティ「clear:both」は変更しないでください。これは残しておくことが非常に重要です。

次に、次のように Web ページを設定するだけです。

<div id=”container”&gt;
<div class=”sidebar”&gt;</div>
<div class=”content”&gt;</div>
<div id=”footer”&gt;</div>
</div>

これについては、 http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-containerでより詳細なブログ投稿を書きました。ご不明な点がございましたら、お知らせください。お役に立てれば！

于 2010-08-22T21:21:09.067 に答える
2

私は、今日、これにはおそらくフレックスボックスを使用するでしょう。聖杯の例を参照してください。

于 2013-10-15T20:14:37.687 に答える
2

おそらく、マルチカラム レイアウトは箱から出していきますが、あなたが探しているものですか?

于 2009-04-26T17:24:40.270 に答える
1

私はジョンと同じ問題に直面していました。TheLibzter は私を正しい軌道に乗せましたが、サイドバーの下部にとどまらなければならない画像が含まれていませんでした。ということで、いろいろと調整して…

重要：

  • サイドバーとコンテンツ (#bodyLayout) を含む div の配置。これは相対的なものでなければなりません。
  • サイドバーの下部に配置する必要がある div の配置 (#sidebarBottomDiv)。これは絶対的なものでなければなりません。
  • コンテンツの幅 + サイドバーの幅は、ページの幅と等しくなければなりません (#container)

CSSは次のとおりです。

    #container
    {
        margin: auto;
        width: 940px;
    }
    #bodyLayout
    {
        position: relative;
        width: 100%;
        padding: 0;
    }
    #header
    {
        height: 95px;
        background-color: blue;
        color: white;
    }
    #sidebar
    {
        background-color: yellow;
    }
    #sidebarTopDiv
    {
        float: left;
        width: 245px;
        color: black;
    }
    #sidebarBottomDiv
    {
        position: absolute;
        float: left;
        bottom: 0;
        width: 245px;
        height: 100px;
        background-color: green;
        color: white;
    }
    #content
    {
        float: right;
        min-height: 250px;
        width: 695px;
        background-color: White;
    }
    #footer
    {
        width: 940px;
        height: 75px;
        background-color: red;
        color: white;
    }
    .clear
    {
        clear: both;
    }

そして、これがhtmlです：

<div id="container">
    <div id="header">
        This is your header!
    </div>
    <div id="bodyLayout">
        <div id="sidebar">
            <div id="sidebarTopDiv">
                This is your sidebar!                   
            </div>
            <div id="content">                  
            This is your content!<br />
            The minimum height of the content is set to 250px so the div at the bottom of
            the sidebar will not overlap the top part of the sidebar.
            </div>
            <div id="sidebarBottomDiv">
                This is the div that will stay at the bottom of your footer!
            </div>
            <div class="clear" />
        </div>
    </div>
</div>
<div id="footer">
    This is your footer!
</div>
于 2011-10-06T08:25:34.770 に答える
0

固定幅のサイドバーを使用している場合は、本文の背景を使用して、サイドバーと同じ幅の画像を指定してください。また、css コードに background-repeat:repeat-y を入れてください。

于 2014-01-31T11:16:59.423 に答える
0

あなたの解決策は、コンテンツ コンテナとサイドバーを div を含む親にラップすることだと思います。サイドバーを左にフロートさせ、背景画像にします。コンテンツ コンテナのサイドバーの幅以上の広い余白を作成します。フロートハックのクリアを追加して、すべてを機能させます。

于 2009-04-26T17:29:57.680 に答える