CSS基本佈局 - 3 divs + 1 div在另一箇中心，

我遇到了一個問題，我只是無法擺脫困境。我想要三個不同的div，填充整個頁面（沒有滾動條）和中間的div與另一個div水平和垂直居中。我嘗試了這麼多，但總是破壞佈局。CSS基本佈局 - 3 divs + 1 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/

謝謝利奧

來源

2014-02-21 user3336871

請向我們展示HTML。 – matewka

使用http://jsfiddle.net/ –

當然！ '

' – user3336871

您可以設置一個絕對定位的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; 
}

來源

2014-02-21 11:49:37 robC

好一個...它應該是真正'5％':) –

笑數學：）... – robC

真棒，這個解決方案是優雅的，解決了問題！非常感謝！ – user3336871

試試這個：

#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

來源

2014-02-21 11:45:51

CSS基本佈局 - 3 divs + 1 div在另一箇中心，

回答

相關問題