我在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/