0

皆さん、こんにちは。いろいろ検索しましたが、自分に合った答えが見つかりません。これが私の問題です：

Bootstrapを使用していることを今すぐ指定します。私はこのように動作する2つの列を持っています:

---------------------
| Content  | Aside1 |
|          |------- |
|          | Aside2 |
---------------------

アイデアは、Aside1 および Aside2 と同じ高さにコンテンツを配置することであり、オーバーフロー: スクロールをコンテンツに組み込みます。

HTML :

<div class="container-full">
  <article class="col-md-8 col-xs-12">
    <p>Long content there</p>
  </article>
  <div class="aside_full_screen">

    <aside class="col-md-4 col-xs-12">
      <p>Social Network Content</p>
    </aside>

    <div class="col-md-4 col-xs-12">
      <p>Kitten Content</p>
    </div>
  </div>
</div>

CSS :

 article{ 
  border: 2px solid black;
  background-color: rgba(240, 116, 90, 1);
  overflow: auto;
  height: 1200px; /* — Just there for example, had to be remove — */
}

::-webkit-scrollbar {   /* — For hiding scrollbar — */
    display: none; 
}

主に入手したのはこちら。そして、これが私が達成したいことです。少し精度を上げて、スクロールバーを非表示にします。私は JavaScript jQuery やあらゆる種類の命題にオープンです。

4

1 に答える 1

0

HTMLに aside1 と aside2 を次のように追加します。

<div class="container-full">
  <article class="col-md-8 col-xs-12">
    <p>Long content there: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </article>
  <div class="aside_full_screen">

    <div class="col-md-4 col-xs-12 aside1">
      <p>Social Network Content</p>
    </div>

    <div class="col-md-4 col-xs-12 aside2">
      <p>Kitten Content</p>
    </div>
  </div>
</div>

次に、jQuery を使用して、ドキュメントの準備ができてウィンドウのサイズが変更されたときに関数を呼び出すことができます。関数内では、height().aside1関数で高さを計算する必要があります。次に、(aside1 + aside2) を に適用します。.aside2totalarticle

jQuery :

$(document).ready(myfunction);
$(window).on('resize', myfunction);

function myfunction() {
  var aside1 = $('.aside1').height();
  var aside2 = $('.aside2').height();
  var total = aside1 + aside2;
  $('article').css("height", total);
};

ペンの例を参照してください。

于 2015-04-29T14:49:30.320 に答える