試圖建立一個靈活的3個按鈕的頁腳

我需要的按鈕集中了位每一個在頁腳周圍填充的定位。

我已經非常接近，但按鈕似乎溢出了頁面的底部？

html, body { 
    height:100%; 
    width:100%; 
    margin:0; 
} 

div#footer{ 
    width:100%; 
    height:10%; 
    bottom:0; 
    top:90%; 
    left:0; 
    background-color:#2A2A2A; 
    position:fixed; 
    display:table-cell; 
    vertical-align:middle; 
} 


#button { 
    height : 90%; 
    width : 30%; 
    background-color : #FFFFFF; 
    margin:1.666%; 
    text-align:center; 
    float:left; 
    -webkit-border-radius: 1em; 
    -moz-border-radius: 1em; 
    border-radius: 1em; 
} 
#button:before { 
    content:''; 
    height:10%; 
    vertical-align:middle; 
    display:inline-block; 
} 

<div id="footer"> 
    <div id="button">button text</div> 
    <div id="button">button text</div> 
    <div id="button">button text</div> 
</div>

來源

2014-03-26 totalitarian

您不能讓元素共享相同的ID。您應該將這些按鈕ID更改爲類。 ID意味着獨特。 –

哎呀。學校男孩錯誤 – totalitarian

做按鈕需要中心水平和垂直或只是水平？請同時使用 – wf4

我已經改變了很多你的CSS的，這是我現在有：

http://jsfiddle.net/wf_4/8BJ94/78/

html, body { 
    height:100%; 
    width:100%; 
    margin:0; 
} 
html { 
    display:table; 
} 
body { 
    display:table-cell; 
    vertical-align:middle; 
    background:#48a; 
    text-align:center; 
} 
div#footer { 
    width:100%; 
    height:10%; 
    min-height:40px; 
    bottom:0; 
    left:0; 
    background-color:#2A2A2A; 
    position:fixed; 
    padding:8px; 
    display:table; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.button { 
    height : 50%; 
    width : 30%; 
    background-color : #FFFFFF; 
    margin:auto 2%; 
    display:table-cell; 
    -webkit-border-radius: 1em; 
    -moz-border-radius: 1em; 
    border-radius: 1em; 
} 
.button:before { 
    content:''; 
    height:100%; 
    vertical-align:middle; 
    display:inline-block; 
} 
.buttonGap { 
    height:50%; 
    width:1%; 
    display:inline-block; 
}

和HTML：

<div id="footer"> 
    <div class="button">button text</div> 
    <div class="buttonGap"></div> 
    <div class="button">button text</div> 
    <div class="buttonGap"></div> 
    <div class="button">button text</div> 
</div>

來源

2014-03-26 14:27:49 wf4

看起來不錯！有沒有在按鈕周圍有一個小間隙的機會，所以他們不接觸？ – totalitarian

是的，我會看看那個，因爲他們使用'display：table-cell'，你可能需要在它們之間插入一些小寬度的東西，因爲'margin'將不起作用......給我5分鐘。 – wf4

@totalitarian我編輯了我的答案並更改了小提琴鏈接以顯示新的CSS。現在，它不是很有語義，但它的工作原理。 – wf4

我認爲這就是你需要： http://jsfiddle.net/e2262/1/

什麼frorcing您的頁腳不要彈性垂直（高度爲）

div#footer { 
    height:10%; 
    top:90%; 
}

，所以我得到的那些騎2屬性在CSS中。現在它固定在底部，隨着按鈕的增長，頁腳可以在高度上增長;）

注意：從不使用CSS元素的多個元素。我換了CSS類

來源

2014-03-26 14:05:21 xeth23

當我調整頁面大小時，頁腳不會改變高度。它需要保持在頁面高度的10％ – totalitarian

只需將按鈕類的高度設置得更小，就像這樣（注意：我將按鈕ID改爲類，因爲id應該是唯一的 - 也由其中一個評論者指出）：

.button { 
    height : 60%; // <-- changed this 
    width : 30%; 
    background-color : #FFFFFF; 
    margin:1.666%; 
    text-align:center; 
    float:left; 
    -webkit-border-radius: 1em; 
    -moz-border-radius: 1em; 
    border-radius: 1em; 
}

Fiddle here

來源

2014-03-26 14:17:48 webeno

對我來說不起作用，因爲按鈕不再是垂直居中的 – totalitarian

您的意思是按鈕文本？因爲按鈕本身看起來像在我的小提琴中垂直居中... – webeno

拖動結果窗口變小，你會看到。 – totalitarian

-1

我已經更新使用flex-box我的解決方案：

HTML：

<div id="footer"> 
    <div class="button">button text</div> 
    <div class="button">button text</div> 
    <div class="button">button text</div> 
</div>

CSS：

div#footer{ 
     position:fixed; 
     height: 10%; 
     bottom:0; 
     left:0; 
     right:0; 
     background-color:#2A2A2A;  
     padding:0; 
     margin:0; 
     text-align:center; 
     display: flex; 
     justify-content: space-around; 
     align-items: center; 
    } 

    #footer .button { 
     display: inline-block; 
     background-color : #FFFFFF;    
     -webkit-border-radius: 1em; 
     -moz-border-radius: 1em; 
     border-radius: 1em; 
     width: 30%; 
     height: 80%; 
     line-height: 25px; 
    }

JSFiddle

來源

2014-03-26 14:34:57 merlot

謝謝，但頁腳不會調整窗口的大小 – totalitarian

它現在工作;） – merlot

試圖建立一個靈活的3個按鈕的頁腳

回答

相關問題