CSS單列布局居中固定寬度100％高度w頁眉和頁腳我最近一直在尋找一種CSS布局，它將顯示一個固定寬度（最小寬度，最好可擴展）的單個居中柱，占據整個高度（減去頁眉和頁腳）。有什么建議嗎？我已嘗試過這里發布的幾種方法，但沒有一種符合我的標準。另外，我不想為此使用JS，所以它必須是純CSS。我不是專家所以我不知道采取哪種方法：三列，每側柱邊距減去中心柱寬度的一半，還有一個人造中心柱，可伸展到100％高度？我有點不喜歡這個想法，因為我的副欄目沒有任何內容單個列，邊距為0自動0自動居中和頂部：xx px為標題騰出空間？然后我該如何將其拉伸至100％高度？任何幫助高度贊賞。干杯，chross
3 回答
MM們
TA貢獻1886條經驗 獲得超2個贊
您可以利用絕對定位。
有一個絕對定位的容器，
top其bottom值和值分別等于頁眉和頁腳的高度，這會將容器拉伸到剩余高度讓
inline-block孩子在里面有100%高度申請
text-align:center父母將inline-block孩子與中心對齊
HTML
<div id='container'> <div><div></div>
CSS
*{
margin:0;
padding:0;}html,body{
height:100%;
text-align:center;}#container{
position:absolute;
top:50px; /*height of header*/
width:100%;
bottom:50px; /*height of footer*/
background:white;
text-align:center;}#container div{
display:inline-block;
min-width:200px;
height:100%;
background:dodger blue;}或者，如果瀏覽器兼容性不是問題，您可以使用css3 calc()函數作為指出的另一個答案
- 3 回答
- 0 關注
- 874 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消