2

次のhtmlページを想定します。

<html>
 <head></head>
 <body>
  <div id="wrapper">
   <div id="header"/>
   <div id="navigation"/>
   <div id="leftcolumn"/>
   <div id="content/>
   <div id="footer"/>
  </div>
 </body>
</html>

私が達成しようとしているのは、leftcolumndivとcontentdivの高さが常に同じであるということです。コンテンツが少ないために左列のdivがコンテンツのdivよりも高い場合があり、その逆の場合もあります。コンテンツが多い場合、コンテンツのdivは左の列のdivよりも高くなります。

ボディの背景、左列の背景、コンテンツの背景がすべて異なる色であるため、現在の状況では、いくつかのレイアウトシェナニガンが生成されます。

これは私のCSSの現状です：

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #FFFEE9;
}

#wrapper {
    margin: 0 auto;
    width: 900px;
    height: auto;
}

#content {
    float: left;
    color: #006350;
    background: #DEE3DC;
    height: 100%;
    display: inline;
    width: 730px;
}

#contents {
    margin: 35px;
}

#contents h1, h2 {
    padding-bottom: 15px;
}

#contents p {
    padding-top: 5px;
    padding-bottom: 5px;
}

#header {
    color: black;
    width: 900px;
    float: left;
    height: 160px;
    background: #FFFEE9;
    margin-top: 10px;
}

#navigation p {
    padding: 3px;
}

#footer {
    width: 900px;
    height: 40px;
    clear: both;
    color: white;
    background: #83422D;
    font-size: 80%;
}

#footer a {
    color: white;
    text-decoration: none;
}

#footer p {
    padding: 4px;
}

#navigation {
    float: left;
    width: 900px;
    height: 25px;
    color: white;
    background: #83422D;
}

#navigation a {
    text-decoration: none;
    color: white;
}

#navigation a:hover {
    text-decoration: underline;
}

#leftcolumn {
    color: white;
    background: #006350;
    height: 100%;
    width: 170px;
    float: left;
}

#leftcolumn a {
    text-decoration: none;
    color: white;
}

#leftcolumn a:hover {
    text-decoration: underline;
}

#leftcolumn li {
    padding-bottom: 10px;
}

#leftcolumn ul {
    margin-left: 20px;
    margin-top: 20px;
    list-style: none;
}

.centered {
    text-align: center;
    margin: auto;
    display: block;
}

#gallery {
    height: 300px;
    width: 650px;
}

#gallery img {
    margin-right: 50px;
    margin-top: 50px;
}

#gallerytext {
    width: 400px;
    font-size: 75%;
    color: black;
    position: relative;
    margin-left: 155px;
    margin-top: -100px;
    text-align: justify;
}

height: 100%, height:inherit, height:auto,...さまざまなdiv（ラッパー、左列、コンテンツ）のようにCSSスタイルを組み合わせて使用​​しようとしましたが、希望する結果が得られないようです。結論：左列とコンテンツdivの高さを同じにしたい場合は、その時点でどちらが高いかに関係なく、どのCSSスタイルを使用する必要がありますか。（そしてjavascriptを使用せずにお願いします）。

左の列が大きいJsFiddleの例：http：//jsfiddle.net/CQPnF/4/

コンテンツが大きい例：http：//jsfiddle.net/BQkme/

4

3 に答える 3

2

左右のパネルでdisplay:table-cellむしろを使用して、目的の結果を得ることができます:-float

私はあなたからフロートを取り除き、#content & #leftcolummnそれらを与えましたdisplay:table-cell;。あなたの要件に従ってうまく機能しています。

更新された CSS

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #FFFEE9;
}

#wrapper {
    margin: 0 auto;
    width: 900px;
    overflow:hidden;
}

#content {
    color: #006350;
    background: #DEE3DC;
    display:table-cell;
    width: 730px;
}

#contents {
    margin: 35px;
}

#contents h1, h2 {
    padding-bottom: 15px;
}

#contents p {
    padding-top: 5px;
    padding-bottom: 5px;
}

#header {
    color: black;
    width: 900px;
    float: left;
    height: 160px;
    background: #FFFEE9;
    margin-top: 10px;
}

#navigation p {
    padding: 3px;
}

#footer {
    width: 900px;
    height: 40px;
    clear: both;
    color: white;
    background: #83422D;
    font-size: 80%;
}

#footer a {
    color: white;
    text-decoration: none;
}

#footer p {
    padding: 4px;
}

#navigation {
    float: left;
    width: 900px;
    height: 25px;
    color: white;
    background: #83422D;
}

#navigation a {
    text-decoration: none;
    color: white;
}

#navigation a:hover {
    text-decoration: underline;
}

#container {
    border:1px solid red;
    overflow:hidden;

}

#leftcolumn {
    color: white;
    background: #006350;
    width: 170px;
    display:table-cell;
}

#leftcolumn a {
    text-decoration: none;
    color: white;
}

#leftcolumn a:hover {
    text-decoration: underline;
}

#leftcolumn li {
    padding-bottom: 10px;
}

#leftcolumn ul {
    margin-left: 20px;
    margin-top: 20px;
    list-style: none;
}

.centered {
    text-align: center;
    margin: auto;
    display: block;
}

#gallery {
    height: 300px;
    width: 650px;
}

#gallery img {
    margin-right: 50px;
    margin-top: 50px;
}

#gallerytext {
    width: 400px;
    font-size: 75%;
    color: black;
    position: relative;
    margin-left: 155px;
    margin-top: -100px;
    text-align: justify;
}

デモを参照してください:- http://jsfiddle.net/BQkme/10/

于 2012-08-22T11:25:20.697 に答える
1

絶対配置を使用する必要があります。

これは動作中のライブデモです。

お役に立てれば。

于 2012-08-22T09:31:32.873 に答える
1

このソリューションは、サポートするマークアップが必要なため、少しハックですが、機能し、以前に使用したことがあります。

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

私が抱えている主な問題は、コンテンツ div を列数と同じ深さまでネストする必要があることです。あなたの場合、コンテンツを 2 つのコンテナー div 内にネストするだけなので、大きな問題ではありません。

マークアップは次のようになります。

<html>
 <head></head>
 <body>
  <div id="wrapper">
   <div id="header"/>
   <div id="navigation"/>
   <div id="container_content">
     <div id="container_leftcolumn">
       <div id="leftcolumn"/>
       <div id="content/>
     </div>
   </div>
   <div id="footer"/>
  </div>
 </body>
</html>
于 2012-08-22T09:27:30.300 に答える