Question

我遇到了一个问题，我无法理解。我想要三个不同的div，填充整个页面（没有滚动条）和中间div，另一个div水平和垂直居中。我尝试了很多，但有些东西总是在破坏布局。

到目前为止，这是我的代码：

html, body {
background-image: url(images/bg_tile.gif);
background-repeat: repeat;
margin: 0;
padding: 0;
resize:none;
width: 100%;
height: 100%;
}

#header {
width: 100%;
height: 14%;
background-color: #09F;
top: 0px;
}

#body_con {
width: 100%;
height: 80%;
background-color: #0CF;
}

#footer {
width: 100%;
height: 6%;
background-color: #09F;
bottom: 0px;
}

#body_image {   
width: 90%;
height: 90%;
margin:0px auto;
background-color: white;
}

我知道，不知怎的，这是可能的，但我无法让它发挥作用。有什么想法吗？

编辑：http://jsfiddle.net/w774g/

谢谢你，利奥

Answer 1

您可以设置绝对定位div的边缘位置，如下所示：

http://jsfiddle.net/w774g/1/

#header {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 86%;
    background-color: #09F;
}

#body_con {
    position: absolute;
    width: 100%;
    top: 14%;
    bottom: 6%;
    background-color: #0CF;
}

#footer {
    position: absolute;
    width: 100%;
    top: 94%;
    bottom: 0;
    background-color: #09F;
}

#body_image { 
    position: absolute;  
    top: 5%;
    bottom: 5%;
    left: 5%;
    right: 5%;
    background: black;
}

Answer 2

试试这个：

#body_con {
    width: 100%;
    height: 80%;
    background-color: #0CF;
    /* added */
    position: relative;
}
#body_image {
    width: 90%;
    height: 90%;
    margin:0px auto;
    background-color: white;
    /* added */
    position: absolute;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

Working Fiddle

CSS基本布局 - 3个div + 1个div在另一个内部，居中

2 个答案: