10

更新 - JavaScript ソリューションに反対することにしました。常に機能するようにする唯一の方法は、setInterval()数秒ごとに実行することです。そんなことしたくない。私はこの CSS が可能であることを知っています。賞金が終わったら、150 くらいで再開します。

左と右の 2 つのセクションで構成されるモーダル ポップアップがあります。両方のセクション内には、上のラベルと下のコンテンツがあります。ラベルは特定のピクセル数に固定されていますが、下部領域は残りのスペースを埋めることができる必要があるため、「残りのスペースを埋める」効果を達成するためにdisplay:table左右と内側のセクションで使用していますdisplay: table-cell. Chrome と Safari でうまく機能します。

CSSは次のとおりです。

#tagBoxLeft,#tagBoxRight {
    display: table;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    opacity: 0;
}
#tagBoxLeft { left: 0 }
#tagBoxDescription {
    display: table-row;
    -webkit-border-top-left-radius: 20px;
    width: 100%;
    word-break: break-all;
    word-wrap: break-word;
    -webkit-box-shadow: 0 1px 0 #FFF;
    -moz-box-shadow: 0 1px 0 #FFF;
    box-shadow: 0 1px 0 #FFF;
}
.nano {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: table-cell;
}
#taglabel {
    display: table-row;
    z-index: 10000;
    border-top: 1px solid #FFF;
    width: 100%;
    height: 39px;
}

そして、テーブルに多数の div を作成するだけで、互いに相対的な高さを持つことができます。また、左辺と右辺はブラウザ ウィンドウを基準としていることに注意してください。そのため、パーセンテージだけを使用することはできません。

ただし、Firefox と Opera では、サイド セクション#tagBoxLeftとサイド セクションは、. Firefox と Opera が通常これをサポートしていることはわかっています ( http://jsfiddle.net/Qxswa/を参照)。しかし、すべてのコンテンツが Firefox と Opera でオーバーフローするのはなぜですか?#tagBoxRightheight:100%;display:table;

問題のスクリーンショットは次のとおりです。

ここに画像の説明を入力

4

5 に答える 5

4

JavaScript を単純に使用して正しい高さを計算し、インラインで適用できない理由はありますか? それほど素晴らしく単純ではありませんが、あなたが説明していることは些細なことです。

var boxHeight = $('#tagBox').height();
var leftLabelHeight = $('#tagBoxDescription').height();
$('#tagBoxPopular').css('height', boxHeight - leftLabelHeight + 'px');

var rightLabelHeight = $('#taglabel').height();
$('#tagBoxStream').css('height', boxHeight - rightLabelHeight + 'px');
于 2012-04-25T21:39:31.207 に答える
2

あなたのサイトを Firefox で開くと、Chrome で表示されるハッシュタグ リンクが表示されなくなります。現在、いくつかの修正を試みていますか? ff バージョンのリンクを元に戻す場合は、これをデバッグするのに役立ちます。

アップデート：

私が見ているのは、display:table と display:table-cells の非常に複雑な組み合わせであり、絶対位置と静的位置がパーセンテージの高さと他の多くの非常にクロスブラウザーの揮発性ミックスと組み合わされています。

多くのパッチ適用と修正を行った結果、次のようになりました。

Firefox でパッチを適用したバージョンのスクリーンショット

明らかにまだ多くのエラーが存在しますが、少なくともスクロールバーが表示されます。

基本的に、問題は、さまざまなブラウザーで非常に均等にレンダリングされないように見える、パーセンテージの高さと怪しげなテーブル表示に依存していることです。

ここには 2 つのオプションがあります。

1.- 元の css/html アプローチを維持し、JS スクロールバーのトラブルシューティングを行います。
2.- はるかに単純な css/html バリアントを使用する

乾杯G

于 2012-04-25T23:00:00.503 に答える
2

これは、上下 (および左右) の両方display:tableの値を設定する絶対配置要素のしばしば無視される機能を使用する、and フレンドを使用する代わりの方法です。それは本質的に上端と下端を「くっつけ」、コンテナに相対的な高さを与えますが、高さを明示的に設定する必要はありません。

更新: Jackson が述べたように、このコードの CSS のみのバージョンは、列に自動高さの固定パネルを提供しません。簡単な JS でそれを修正できます。JS を使用しないユーザー向けに適切なデフォルトの高さを設定するだけで済みます。JS は、間隔を置いてではなく、モーダルをロードするときにのみ実行する必要があります。

更新されたフィドルは次のとおりです。http://jsfiddle.net/cxY7D/5

簡略化された HTML は次のとおりです。

<div id="modal">
      <div class="left">
          <div class="description">
            <h1>#tag_name</h1>
            <dl>
             <dt>Tags</dt> <dd>27</dd>
            </dl>
          </div>
          <div class="contents">
            <div class="header">            
              <h2>Featured</h2>
            </div>
            <ol>
              <li>Something Something</li>
              <li>...</li>
            </ol>
          </div>
      </div>
      <div class="right">
        <div class="contents">
          <div class="header">
            <h2>Recent</h2>
          </div>
          <ol>
            <li>Something Something</li>
            <li>...</li>
          </ol>
        </div>
      </div>
  </div>

およびCSS:

body {
      background:#444;
    }
     #modal {
       background:#FFF;
       position: absolute;
       top: 4em;
       bottom: 4em;
       left: 6em;
       right: 6em;
     }

     #modal .left,
     #modal .right {
       position:absolute;
       top: 0;
       bottom: 0;
     }

     #modal .left {
       background:#ACF9E4;
       left: 0;
       right:50%;
     }

     #modal .right {
       background:#FCFFCD;
       right: 0;
       left:50%;
     }

     #modal .contents {
      position:absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      overflow-y:auto;
     }

     #modal .description {
       height: 8em;
     }

     #modal .description + .contents {
       top: 10em;
   }

     #modal .header,
     #modal .description,
     .contents li {
       border-bottom:1px solid #CCC;
       padding: 1em;
     }

     #modal .description dt {
       float: left;
       padding-right: 1em;
     }

これは非常に便利で堅牢な手法です。「絶対位置」というと身震いする人が多いのですが、こうやって使うと解放感がありますね！

JS (jQuery を想定)

$(function(){
    $('#modal').on('display', function(){
        //Calculate the height of the top left panel, and provide the remaining space to the bottom left
        var leftColumn = $(this).find('.left'),
            descriptionHeight = leftColumn.find('.description').height('auto').outerHeight(); //Set the height to auto, then read it

        leftColumn.find('.contents').css('top', descriptionHeight)//Apply the height to the scrolling contents pane     
    });

    $('#modal').trigger('display');
});​

JS は左上のペインを自動高さにリセットし、高さを読み取り、左下のパネルの上部座標として適用します。これはカスタム イベントとして適用されるため、モーダル表示コードの一部としてトリガーできます。

同様の手法を使用して、私が与えた答えと、その方法と理由の詳細な説明を次に示します。不可能なレイアウト? . 詳細については、別のリストの記事を参照してください。また、IE6 で動作するようにするためのいくつかの簡単な修正も確認してください (気になる場合)。

于 2012-05-01T22:04:33.113 に答える
0

#tagboxleftと#tagboxrightのオーバーフローを非表示にする必要があります。これは、に設定#tagboxすることで実行できますoverflow:hiddenが、閉じるボタンの一部が非表示になります。したがって、左右に別のdivをラップする必要がありますが、xを。でラップする必要はありませんoverflow:hidden。

そのようです：

<div id="tagbox">
    <div id="tagboxX"></div>
    <div id="tagboxleftright" style="overflow:hidden"> <!-- This is the wrapper div around tagbox left & right. Of course, move overflow:hidden to the style sheet -->
        <div id="tagboxLeft"></div>
        <div id="tagboxRight"></div>
    </div>
</div>

これはFirefoxで機能し、InternetExplorerでも機能するはずです。

于 2012-04-25T19:36:51.147 に答える
0

をどのように使用しているかを確認したい場合があります<section>。と同じではありません<div>。

W3C - HTML5 セクション要素とヘッダー要素の使用。

<header>同じように見えます。どちらもフロー要素であり、コンテンツ コンテナーとしてではなく、コンテンツ コンテナーのセマンティック構造化要素として設計されています。

私は Firebug を使用し、直感でと の両方<header>を変更<section>しました。display:block物事が形になり始めました。ただし、これらの変更後にスクロール効果を発生させることができませんでした。<header>その後、サファリで に変更しましたdisplay:inline。案の定、両方のブラウザ ウィンドウは次のようになりました。 ここに画像の説明を入力

于 2012-04-25T08:18:12.760 に答える