我在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处看到这一点:我希望双方具有相同的背景色。

希望有人可以帮助我...

谢谢。

最佳答案

您可以尝试以下两种可能的技术:

1)使用Javascript(或jQuery或您拥有的东西)来均衡每个包含div的高度。例如,请参见此DEMO

2)重新整理您的html,以便:


它使用find here的一种布局技术。
将高度设置为100%,例如在this trick中。
去除浮子并使用table-cell。请参见this


我更喜欢最后一个。希望这可以帮助!

关于html - MVC/Razor/HTML垂直平铺窗口上的背景颜色相同,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19014838/

10-12 12:58
查看更多