0

コンテナdivがあり、3つのdiv、サイドバー、コンテンツ、ヘッダーが含まれていますが、内部のすべての要素が適切にレンダリングされています（これが問題に影響する可能性がある場合は、「相対」として配置されます）、サイドバーとコンテンツmin-height: 100%;何があってもレンダリングされません...

私のdivは、想定されている最小の高さでは伸びません...

コードは次のとおりです：http：//jsfiddle.net/vhZV6/4/

ご覧のとおり（私はそれを最もよく認識するために白い背景を配置しました）、divwichは単純に伸びないはずです...

編集：ここに私がソリューションを実装しようとした一時的なサイトがあります...ご覧のとおりhttp://www.wabisuke-team.org/Temp/home.html、最後の2ページ（streesと "contattateci "）は必要に応じてレンダリングされますが、これら2つは、divの背景画像が乱雑になっていて、サイズが適切に変更されていません。

編集：最小の高さをパーセンテージではなくピクセルで表示することでこれを解決しました。これで、希望どおりに機能するようになりました。皆さんの努力と忍耐に感謝します^^

4

2 に答える 2

1

使用高さ：100％、最小高さは必要ありませんhttp://jsfiddle.net/vhZV6/5/を参照してください

html{
    height:100%;
}
body {
    display:block;
    height:100%;
    margin: 0;
    padding: 0;
    overflow:auto;
    /* just some back ground and graphical tweeks*/

    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    color:#000000;
    background: #86acef; /* Old browsers */
    background: -moz-linear-gradient(top,  #86acef 0%, #baceef 35%, #86acef 70%, #baceef 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#86acef), color-stop(35%,#baceef), color-stop(70%,#86acef), color-stop(100%,#baceef)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #86acef 0%,#baceef 35%,#86acef 70%,#baceef 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #86acef 0%,#baceef 35%,#86acef 70%,#baceef 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #86acef 0%,#baceef 35%,#86acef 70%,#baceef 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #86acef 0%,#baceef 35%,#86acef 70%,#baceef 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86acef', endColorstr='#baceef',GradientType=0 ); /* IE6-9 */

}
/* ~~this fixed width container surrounds the other divs~~ */
.container {
    height: 100%;
    container:overflow;
    display:block;
    position:relative;
    width: 1000px;
    background: #FFF url(../img/Graphic/bg.jpg) no-repeat  fixed center;
    background-size:100% 100%;
    background-position:center;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
.header {
    position:relative;
    /* header graphical tweeks */

    background: #2945c4; /* Old browsers */
    background: -moz-linear-gradient(top,  #2945c4 0%, #7db9e8 35%, #2945c4 70%, #7db9e8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2945c4), color-stop(35%,#7db9e8), color-stop(70%,#2945c4), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #2945c4 0%,#7db9e8 35%,#2945c4 70%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #2945c4 0%,#7db9e8 35%,#2945c4 70%,#7db9e8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #2945c4 0%,#7db9e8 35%,#2945c4 70%,#7db9e8 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #2945c4 0%,#7db9e8 35%,#2945c4 70%,#7db9e8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2945c4', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
.sidebar1 {
    position:relative;
    float: left;
    width: 180px;
    height:100%;
}
.content {
    position:relative;
    padding: 10px 0;
    width: 780px;
    float: left;
    height:100%;
    background: #FFF;
    background-size:100% 100%;
    background-position:center;
}
​
于 2012-09-21T19:30:46.680 に答える
-3

これが長いコンテンツのフィドルですhttp://jsfiddle.net/xM4NC/

ここに短いhttp://jsfiddle.net/xM4NC/1/があります

bodyを高さ100％に設定しましたが、コンテンツdivをmin-height 100％に設定しました。このように、親は定義された高さを持っていたので、divは少なくとも体と同じ高さになりますが、必要に応じてそれを超えて成長します。次に、左マージンを追加し、そのスペースにサイドバーを浮かせました

body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#content {
    background: #EEE;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    padding: 0 20px 0 20px;
    margin: auto;
    margin-left: 180px;
    font: 1.5em arial, verdana, sans-serif;
    width: 960px;
    min-height: 100%;
}

とhtml

<div class="header">header</div>
<div class="sidebar1">sidebar</div>
<div id="content">
    text
</div>​
于 2012-09-21T19:56:34.910 に答える