10

デザインの 2 つのセクション (添付の画像を参照) をページ全体の高さまで拡張したいと考えています。私は Fiddle を作成しようとしましたが、そこではうまくいきません。

ここに画像の説明を入力

結果を保持する の をheightに設定しました。ただし、固定フッターまでは伸びません。div100%

#found-results { 
    height: 100%px;
    margin-bottom: 50px;
    background: #CCC;
}

また、緑色のボックスをフッターまで伸ばしたいです。CSS は次のとおりです。

.main {
    width: 606px;
    float: left;
    padding: 15px 0 0 16px;
    position: absolute;
    background: green;
    margin-left: 383px;
}

追加height: 100%;するとうまくいくように見えますが、タブの 1 つに多くのテキストが含まれていると、十分に伸びません。

どんな助けでも大歓迎です。

4

5 に答える 5

6

私はあなたがこのようなものを求めていると思いますか？jsFiddle

私はあなたのウェブサイトから必要なマークアップをコピーするだけで少し簡単になりました。使用されている 、 class、idおよび要素はあなたのウェブサイトとまったく同じです。これにより、これを実装するのがかなり簡単になります。あなたのウェブサイトのソリューション。

このレイアウトは常に少なくとも画面全体を埋め、両方のセクションが同じ高さで固定フッターに接触します。いずれかのセクションのコンテンツが高すぎる場合、スクロール バーが表示され、両方のセクションの一番下に到達するまで下にスクロールできます。両方のセクションは常に同じ高さになります。列内のコンテンツを追加および削除するいくつかのボタンをヘッダーに追加しました。これにより、コンテンツがドキュメントの高さよりも高い場合に何が起こるかを簡単に確認できます。

編集

おそらくヘッダーも修正する必要があることに気付きました（現在のWebサイトではそうであるように思われるため）。これは、ヘッダーが固定されたバージョンです。jsFiddle.

編集2

フィドルにいくつかのボタンを追加して、列内のコンテンツによって列がドキュメントの高さよりも高くなった場合に何が起こるかを簡単に確認できるようにしました。

HTML

<header></header>
<div id="container">
    <section class="results"></section>
    <section class="main"></section>
</div>
<footer></footer>

CSS

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
header {
    position: fixed;
    top: 0px;
    height: 60px;
    width: 100%;
    background-color: #FFF;
}
#container {
    height: 100%;
    overflow:auto;
    padding-top: 60px;
    padding-bottom: 60px;
    display: table;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
footer {
    position: fixed;
    bottom: 0px;
    height: 60px;
    background-color: #333333;
    width: 100%;
}
.main {
    display: table-cell;
    background-color: #008000;
}
.results {
    display: table-cell;
    background-color: #EFEFEF;
    width: 383px;
}
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}
于 2013-05-21T23:37:46.207 に答える
0

Jquery を使用してこれを実現できます。

$(document).ready(function() {
    var window_height = $(window).height();
    var footer_h = $("#footer").height();
    var container_height = window_height - footer_h ;
    $("#container").hide();
    $("#container").css('min-height', container_height + "px");
    $("#container").show();
});
于 2013-05-28T08:09:49.827 に答える
0

あなたの問題はここにあると思います：#found-results { height: 100%px; ...

...さらに、これも追加する必要があると思います:

html, body {height: 100%}
于 2013-05-16T23:19:49.580 に答える
0

ページをロードした後、サイドバーの高さに応じてjqueryで高さを設定できます

$(document).ready(function(){
    $('#main').height($('#sidebar').height());
});
于 2013-05-25T21:31:01.790 に答える