Question

我要将Sharepoint 2007网站迁移到Sharepoint 2010，并且用户拥有IE8浏览器。

所以，我想在跨浏览器模式下设置具有该布局的网站。

我真正的问题是我会在左侧和右侧的列中设置渐变背景，浏览器高度为100％，而我的中间div的最小宽度必须为955px。

没有TABLE代码可以吗？

我试过了：

<div id="main1">
   <div id="main2">
    <div id="left">&nbsp;</div>
    <div id="right">&nbsp;</div>
    <div id="middle">
         <table width="100%" height="500"> <tr><td>aaa</td></tr></table>
    </div>
    <div class="cleaner">&nbsp;</div>
   </div>
</div>

的CSS：

body,html{
     height:100%;
     min-height:100%;
     background-color:gray;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
PADDING-TOP: 0px;
}
#main1 {
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
PADDING-TOP: 0px;

MIN-WIDTH: 995px;
border-bottom:1px solid gray;

height: auto;
min-height:100%


}
#main2 {
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
BACKGROUND: url(blue.gif) repeat-y right top;
PADDING-TOP: 0px;
}
#left {
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-LEFT: 0px;
WIDTH: 20px;
PADDING-RIGHT: 0px;
background-color:blue;
FLOAT: left;
FONT-SIZE: 80%;
PADDING-TOP: 0px;
height:100%;
}
#right {
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-LEFT: 0px;
WIDTH: 20px;
PADDING-RIGHT: 0px;
background-color:blue;
FLOAT: right;
FONT-SIZE: 80%;
PADDING-TOP: 0px;
height:100%;
}
#middle {
MARGIN: 0px 20px;
BACKGROUND: red;
FONT-SIZE: 80%;
height:100%;
min-height:100%;
}
.cleaner {
HEIGHT: 1px;
CLEAR: both;
}

Answer 1

由于标准屏幕分辨率为1024 * 768，您可以分别为左右div提供固定宽度，也可以给中间div。

Answer 2

HTML

<div id="mainContainer">

    <div id="left-column" class="column">           
    </div>

    <div id="middle-column" class="column">             
    </div>

    <div id="right-column" class="column">      
    </div>  

</div>

CSS

#mainContainer{
    width: 1355px;
    margin: 0px auto;
    padding: 0px;
}

.column{
    display: block;
    height: 100%;
    float: left;
}
#middle-column{
    width: 955px;

}
#left-column, #right-column{
    width: 200px;

}

Answer 3

是的，

<aside class="sidebar left"></aside>
<div class="mainContent"></div>
<aside class="sidebar right></asdie>

其余的是CSS。 <aside></aside>是HTML5标记。玩得开心。

IE8 - 3列布局：100％宽度，左右div固定宽度和100％高度+中间div最小宽度955px

3 个答案: