-2

親の灰色の divは、ライム ボックスの下部を隠します。

  • ライムボックスの底が見えるようにしてもいいですか？
  • オーバーフローを使用する正しい方法は何ですか: hidden; ここ？

親グレー ボックスの幅を 100% 確保することも重要です。

例 1 - ズームインの問題

例 2 - ズームアウトの問題

灰色の線の幅を 100% にするにはどうすればよいでしょうか (ズームインとズームアウトの両方で)。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<style>
/* Start BG RECT */
.bg-rect {
    position: absolute; 
    top: 50px;
    left:0; right:0;    /* Required to be 100% 100% */
    min-width: 980px;   /* max for iPad */  
    height: 263px;
}

#bg-rect-important {
    overflow: hidden;   /* Disable right bg breaking by words on the right! */
    /* overflow hidden: disallows child be taller then parent?! */
    background-color: #656565;
}

/* Start BASE RECT */
.base-rect {
    position: relative; /* margin: auto works only with position: relative  */ 
    margin: 0 auto;     /* Centralize! */
/*!SPACE>*/top:32px; width:940px;
    /*left: -300px; /* unfortunately scroll doen't work */
}

#base-rect-lime {
    background-color: #3F3;
    height:249px;
}

    /* Start LIME RECT : left, right */
    #left-text {
        position:absolute;
        left:-200px; 
        width:200px; height:218px;
    }
    #right-text {
        position:absolute;
        right:-200px;
        width:200px; height:218px;
    }
    /* End LIME RECT : left, right */

/* End BASE RECT */
/* End BG RECT */
</style>

</head>

<body>

<div class="bg-rect" id="bg-rect-important">
    <div class="base-rect" id="base-rect-lime">
        <div id="left-text"></div>       
        <div id="right-text"></div>
    </div>
</div>

</body>
</html>
4

2 に答える 2

0

私はこれがあなたが望むものだと確信しています：

#bg-rect-important {
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #656565;
    width: 100%;
}

ここでフィドル - http://jsfiddle.net/h2E7v/

于 2013-03-15T19:13:11.637 に答える
0

我々が考えます、

#bg-rect-important {
background-color: #656565;
}

ライムボックスの下部が見えるようになります

また、親グレー ボックスの 100% 幅を保存します。

これがお役に立てば幸いです。

于 2013-03-15T19:02:17.893 に答える