14

しばらくの間、このレイアウトに取り組んできましたが、私が取るたびに、ある種の障害に遭遇しました (これの v1: https://stackoverflow.com/questions/14572569/how-can-i-contain-pos-abs -div-in-specific-area )

私が今やろうとしているのは、.spread のサイズをブラウザー ウィンドウの幅と高さに合わせることです。そのため、ユーザーが現在ブラウザーで表示できるサイズを超えることはありません (.spread は現在、幅/高さが固定されており、デモ用)。理想は、オンザフライでサイズ変更でき、即座に適応することです (つまり、メディアクエリはありません)。

上記にリンクしているv1バージョンでは正常に機能しますが、.spreadに実際の幅/高さが欠けているため、フェード効果に問題がありました。

これが新しいデモです:
http://jsbin.com/uciguf/1

更新: マークアップは、説明どおりに機能する限り変更できます。

<div class="scrollblock" id="scroll_spread-1">
    <div class="action"><!-- --></div>
    <!--  -->       
</div>
<div class="scrollblock" id="scroll_spread-2">
    <div class="action"><!-- --></div>
    <!--  -->       
</div>

<div class="contentblock" id="spread-1">
    <div class="inner windowwidth windowheight">
        <div class="content">
            <span></span>
            <div class="spread">
                <div class="fade"><!-- --></div>
                <div class="left centerimage">
                    <img src="http://s7.postimage.org/8qnf5rmyz/image.jpg">
                </div>
                <div class="right centerimage">
                    <a href="#scroll_spread-2"><img src="http://s7.postimage.org/kjl89zjez/image.jpg"></a>
                </div>
            </div>  
        </div>  
    </div>  
</div>

<div class="contentblock" id="spread-2">
    <div class="inner windowwidth windowheight">
        <div class="content">
            <span></span>           
            <div class="spread">
                <div class="fade"><!-- --></div>
                <div class="left centerimage">
                    <a href="#scroll_spread-1"><img src="http://s7.postimage.org/5l2tfk4cr/image.jpg"></a>
                </div>
                <div class="right centerimage">
                    <a href="#scroll_spread-3"><img src="http://s7.postimage.org/fjns21dsb/image.jpg"></a>
                </div>
            </div>
        </div>  
    </div>  
</div>

 

html {
    height: 100%;
}

body {
    background: #eee;
    line-height: 1.2em;
    font-size: 29px;
    text-align: center;
    height: 100%;
    color: #fff;
}

.scrollblock {
    position: relative;
    margin: 0;
    width: 100%;
    min-height: 100%;

    overflow: hidden;
}

.contentblock {
    margin: 0;
    width: 0;
    min-height: 100%;

    overflow: hidden;

    position: fixed;
    top: 0;
    right: 0;
}

.contentblock .inner {
    z-index: 2;

    position: absolute;
    right: 0;
    top: 0;

    background: #eee;
}

.fade {
    width: 100%;
    height: 100%;

    position: absolute;
    right: 0;
    top: 0;

    background-color: #000;
    opacity: 0;

    z-index: 3;
}

.content {
    height: 100%;   
}

.content span {
   height: 100%;
   vertical-align: middle;
   display: inline-block;
}

.content .spread {
    vertical-align: middle;
    display: inline-block;
}

#spread-1 {
    color: #000;
    z-index: 105;
}

#spread-2 {
    z-index: 110;
}

.spread {

    max-height: 800px;
    max-width: 1130px;
    position: relative;
}

.spread .left {
    position: relative;
    width: 50%;
    float: left;
    text-align: right;
    height: 100%;
}
.spread .right {
    position: relative;
    width: 50%;
    float: left;
    text-align: left;
    height: 100%;
}

div.centerimage {
    overflow: hidden;
}
div.centerimage img {
    max-width: 100%;
    max-height: 100%;
}

div.centerimage span {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}
div.centerimage img {
    vertical-align: middle;
    display: inline-block; 
}

PS タイトルは本当に悪いです。私が何を探しているのかわからないのですが、より良いものを考えられる場合は、より有益なものに変更してください。

4

4 に答える 4

4

完全な解決への道のりの 4 分の 3

これは、非常に狭い幅のウィンドウ サイズに対応できないため(古いバージョンのように) 、まだ完全な解決策ではありません。しかし、それはあなたが求めるものへの良い一歩です。

これが例です。

主な変更点は次のとおりです。

追加した

.spread { height: 93%; } /* You had originally wanted a height difference */

削除されました

  • overflow: hiddenからdiv.centerimage。
  • width: 50%.leftとから.right。
于 2013-02-03T14:22:32.533 に答える
1

たぶん、.spread除数を固定することができます

.spread {
  bottom: 11px;
  left: 11px;
  right: 11px;
  top: 11px;
  position: absolute;
  /* ... */
}

このようにして、ビューポート領域と同じサイズに変更されます。

ここでは、デモ用のjsFiddleを示します。

続ける

于 2013-02-13T18:14:39.273 に答える
0

おそらく CSS/HTML ソリューションのみを探していたのでしょうが、実際には Javascript を使用するのが最善でしょう。CSS と HTML を使用するだけでは、きれいで正確になる方法はありません。しかし、ページの読み込みとウィンドウのサイズ変更でほんの少しの JavaScript を実行すると、div は実際の高さ/幅の値を持ち、きれいにスケーリングできます。トリックは、外側の div が JavaScript によって設定された幅/高さを取得するようにし、そのすべての子が % ディメンションを使用して適切に成長するようにすることです。

JQueryを使用した基本は次のとおりです。

<script type="text/javascript">
//Function to get the current window dimensions.
function get_window_dims() {
    var dims = [];
        if (parseInt(navigator.appVersion)>3) {
            if (navigator.appName=="Netscape") {
                dims[0] = window.innerWidth;
                dims[1] = window.innerHeight;
            }
            if (navigator.appName.indexOf("Microsoft")!=-1) {
                dims[0] = document.body.offsetWidth;
                dims[1] = document.body.offsetHeight;
            }
        }
    return dims;
}
function ResizeDivs {
    var dims = get_widnow_dims();
    var div_width = Math.floor(dims[0] * 0.93); // calculating the div width to be 93% of the window width
    $('div.spread').css('width',div_width+'px');
}
$(function() {
    ResizeDivs();
    $(window).resize(function(){
         ResizeDivs();
    });
});
</script>

このコードをより簡潔にするために簡単にクリーンアップすることができますが、すべての部分を確認できるように、この方法でここに置くことにしました。余分な時間を費やしたい場合は、さらに JQuery を追加して、ウィンドウのサイズが変更されたときに div をアニメーション化することもできます。

お役に立てれば。

于 2013-02-04T00:12:42.393 に答える
0

問題を解決するためにレスポンシブ フレームワークの使用を検討したことがありますか? 幅と高さをパーセンテージで設定し、最小幅、最小高さを設定できます。

于 2013-02-06T23:11:36.593 に答える