1

我正在尝试构建一个具有 220px 固定左侧边栏和填充屏幕其余部分的固定页面的站点。我正在尝试用图像填充页面部分并在顶部显示信息。该代码在 Chrome 和 Firefox 中运行良好，但无法在 IE 中运行。

在不使用绝对 div 的情况下，任何人都可以为我想象的更好的替代方案提供任何建议吗？

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
    <body>
    <div id="wrap"> 
    <div id="sidebar"> 
        <div class="logo">
        <a id="logo"> <img src="LOGO.png"/></a> 
        </div>
    <ul class="navigation red" id="red">
      <li><a href="#" class="active">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Shop</a></li>
    </ul>
    </div>

    <div id="page" style="padding:0 !important;">
    <img src="images/back.jpg" class="back" alt=""/>

    <div id="center">
        <div class="header">
        <center> <h3 class="page_title">Website Title</h3></center>
        </div>
        <!-- services -->
        <div class="section group">
            <div class="one_half first">
            <div class="column_content">
                <h4> Title</h4>
                <img src="images/2.png"/>
                <p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
            </div>
        </div>

<div class="one_half first">
            <div class="column_content">
                <h4> Title</h4>
                <img src="images/2.png"/>
                <p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
            </div>
        </div>

        <div class="one_half first">
            <div class="column_content">
                <h4> Title</h4>
                <img src="images/2.png"/>
                <p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
            </div>
        </div>
    <div class="one_half first">
            <div class="column_content">
                <h4> Title</h4>
                <img src="images/2.png"/>
                <p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
            </div>
        </div>

        </div>
</div>
</div>
</div>
</body>
</html>

CSS

body {
    background:#FFF;
    font-size:14px;
    height:100%;
    width: 100%;
}
div#wrap {
    width:100%;
    max-width:100%;
    overflow:hidden;
    margin:0 auto!important
}
div#sidebar {
    width:220px;
    height:100%;
    float:left;
    background: #FFF;
    border-right:1px solid #2e2f2f;
    position:fixed
}
div#page {
    height:100%;
    left:220px;
    right:0px;
    background: #FFF;
    position:absolute;
    padding:2% 5%;
}
div#center{
    margin:0 auto !important;
    width:100%;
    height:auto;
    z-index:1000;
    background:rgba(255,255,255,0.5);
}
.group {
    padding: 0 20px 0 20px !important;  
    position:absolute;
    z-index:10;
    bottom: 20px !important;
    left:0;
    right:0;
    max-width:850px;
    margin:0 auto !important;
    display:inline-table;
}
.header {
    padding:0 20px 0 20px !important; 
    position:absolute;
    z-index:10;
    top: 8% !important;
    left:0;
    right:0;
    max-width:850px;
    margin-left:auto !important;
    margin-right:auto !important;
}
img.back{
    min-height:100%;
    min-width:1024px;
    width:100%;
    height:auto;
}
.one_half {
    font-size: 17px;
    float:left;
    width:50%;
    overflow:hidden;
}

一段时间以来一直在努力解决这个问题，但没有取得任何进展，任何帮助将不胜感激。

谢谢！

- - 编辑 - -

不要以为我说清楚了我要居中的组和标题 div 不在 IE 中

4

1 回答 1

0

如果这不是您想要的，我需要您更好地解释您的要求。 http://jsfiddle.net/HhddF/

.back {
    background-color:#3D6AA2;
    height:100%;
    width:100%;
}
于 2013-04-09T23:37:51.533 回答