0

Razor/MVC で次のビューを実行しています。

<div class="body">
    <div class="content-wrapper">
        <div class="treewindow">

            <div class="treewindowtitle">
                TREEWVIEW TITLE
            </div>

            <div class="treewindowcontent">

                <div id="EquipmentTree">
                    <ul>
                        <li><a>Equip Class1</a>
                            <ul>
                                <li><a>Equip1.1</a>
                                    <ul>
                                        <li><a>Equip1.2</a></li>
                                        <li><a>Equip1.3</a></li>
                                    </ul>
                                </li>
                                <li><a>Equip Class2</a>
                                    <ul>
                                        <li><a>Equip2.1</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>

            </div>
        </div>

        <p>Left Text 1</p>
        <p>Left Text 2</p>
        <p>Left Text 3</p>

    </div>
</div>

アイデアは、ツリービューの選択に従って表示されるデータをナビゲートし、メイン画面の右側に配置するために、左側に配置されたツリービュー コントロールを持つことです。このコードは、一部のデータが動的にロードされるように行われます (すべてのロジックは、私が抱えている問題を特定するために削除されました)。

次の .css ファイルを使用しています。

html 
{
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}

body
{
    background-color: #fff;
    font-size: .85em;
    border-top: solid 5px #000;
    font-family: 'Segoe UI' , Tahoma, Geneva, Verdana, Helvetica, sans-serif;
    font-size: small;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    color: #000066;
    margin: 0;
    padding : 0;
}

a {
    color: #000066;
    outline: none;
    padding-left: 3px;
    padding-right: 3px;
    text-decoration: underline;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 960px;
}

.body {
    background-color: #efeeef;
    clear: both;
    padding-bottom: 35px;
}


/* Treeview control
----------------------------------------------------------*/
.treewindow
{
    float: left;
    width: 200px;
    color: #495677;
    background-color: #efeeef;
}

.treewindowtitle
{
    color: #fff;
    background-color: #495677;
    text-align: center;
    font-size: smaller;
}

.treewindowcontent
{
    width: 200px;
    height: 400px;
    overflow-y: scroll;
    overflow-x: scroll;
    color: #495677;
    background-color: #efeeef;
}

私の問題は、両方の画面で同じ背景色を維持することです。ウィンドウが左側に開くと、画面の背景の右側が破壊されることがあります。ここFiddleでそれを見ることができます: 私は両側に同じ背景色を持たせたい.

誰かがそれで私を助けてくれることを願っています...

ありがとう。

4

1 に答える 1

1

試してみるとよい 2 つのテクニック:

1）Javascript（またはjQueryなど）を使用して、含まれている各divの高さを均等にします。たとえば、このDEMOを参照してください。

2) 次のいずれかになるように、html を改造します。

  • ここにあるレイアウト手法の 1 つを使用します。
  • このトリックのように、高さを 100% に設定します。
  • フロートを取り外して使用しますtable-cell。これを参照してください。

私は可能な限り最後のものを好みます。お役に立てれば！

于 2013-09-25T21:10:32.667 に答える