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

您可以尝试两种可能的技术：

1）使用Javascript（或jQuery或你有什么）来均衡每个包含div的高度。例如，请参阅此演示。

2）重组你的html，以便：

我尽可能喜欢最后一个。希望这可以帮助！

于 2013-09-25T21:10:32.667 回答