Question

我正在尝试构建一个固定左侧边栏为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中

Answer 1

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

.back {
    background-color:#3D6AA2;
    height:100%;
    width:100%;
}

在IE中无法获得绝对div到水平居中

1 个答案: