請問高度調整置中- 藍色小舖 BlueShop

台灣最大程式設計社群網站

∣免費加入會員∣登入 ∣回首頁∣ 您好

線上人數
99

會員總數：246203
討論主題：189777

登入

登出

歡迎您免費加入會員

討論區選單

開發工具

行動裝置開發

資料庫

多媒體 / 網管

綜合

文章區

討論區列表 >> CSS/HTML5/Bootstarp >> 請問高度調整置中

[]

[我要回覆]

請問高度調整置中
價值 : 50 QP 點閱數:754 回應數:6

樓主

Eric16899

598	136
1829	306

發送站內信

我的頁面要將色塊居中，左右白邊會依調整瀏覽器寬度自動調整
但高度無法辦到請問是啥問題如果解決??

請問高度100% 為何不會滿版(但寬度是可以)??

謝謝

搜尋相關Tags的文章： [ CSS 高度置中 ] ,
本篇文章發表於2015-08-24 22:30

1樓最有價值解答迷路	要隨可視範圍變化垂直置中在CSS3之前是蠻麻煩的工作用CSS3的話就很簡單了，下面的範例提供參考 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="zh-tw" /> <title>色塊隨可試範圍變動置中</title> <style type="text/css"> body, div{ margin: 0; padding: 0; border: 0; } .div0 { width: 90vw; height: 80vh; background-color: #f00; margin-top: 10vh; margin-left: 5vw; } </style> </head> <body> <div class="div0"></div> </body> </html> vw是CSS3的新單位，意思是可視範圍的寬度百分比 vh是CSS3的新單位，意思是可視範圍的高度百分比本篇文章回覆於2015-08-25 10:13 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓不錯的參考肉肉	HI~~樓主有看過您的程式碼，如是要將色塊居中程式碼如下: <style> html,body{ top:0; right:0; margin:0px; height:100%; } .container { height:90%; margin-top:5%; margin-bottom:5%; width:90%; margin-left:5%; margin-right:5%; background:#09F; } </style> 這樣設的話寬跟高確實都有滿版如果是要讓色塊占滿整個網頁的話就跟.container的寬高有關係了。本篇文章回覆於2015-08-25 10:25 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓作者回應 Eric16899	感謝兩位大大回應請問迷路大大為啥會出現拉Bar 雖我亂試加上position:absolute; 就不會出現但我不知道原因 <style type="text/css"> body, div{ margin: 0; padding: 0; border: 0; } .div0 { margin-top: 10vh; height: 80vh; width: 90vw; margin-left: 5vw; background-color: #f00; position:absolute; } 本篇文章回覆於2015-08-25 11:46 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
4樓作者回應 Eric16899	感謝肉肉大大我一直弄不出來的就是高度 margin-top:5%; 如果調整IE 高度色塊無法自動調整 GOOGLE 很久找到範例使用top5%;空白就會自動調整... 問否margin-top:5% 某些情況會失效?? TKS 本篇文章回覆於2015-08-25 11:53 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
5樓回應迷路	會出現scrollbar??你的瀏覽器是? 我用chrome、firefox和ie11測試都沒有這樣的情況本篇文章回覆於2015-08-25 12:10 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
6樓回應肉肉	回樓主~~ 正常來說是不會有失效的問題，因為在margin-top:5%和其他相關的程式碼都是用"%"所以會有自動調整的感覺本篇文章回覆於2015-08-25 13:57 == 簽名檔 == --未登入的會員無法查看對方簽名檔--

回覆

如要回應,請先登入.

1樓最有價值解答迷路	要隨可視範圍變化垂直置中在CSS3之前是蠻麻煩的工作用CSS3的話就很簡單了，下面的範例提供參考 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="zh-tw" /> <title>色塊隨可試範圍變動置中</title> <style type="text/css"> body, div{ margin: 0; padding: 0; border: 0; } .div0 { width: 90vw; height: 80vh; background-color: #f00; margin-top: 10vh; margin-left: 5vw; } </style> </head> <body> <div class="div0"></div> </body> </html> vw是CSS3的新單位，意思是可視範圍的寬度百分比 vh是CSS3的新單位，意思是可視範圍的高度百分比本篇文章回覆於2015-08-25 10:13 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓不錯的參考肉肉	HI~~樓主有看過您的程式碼，如是要將色塊居中程式碼如下: <style> html,body{ top:0; right:0; margin:0px; height:100%; } .container { height:90%; margin-top:5%; margin-bottom:5%; width:90%; margin-left:5%; margin-right:5%; background:#09F; } </style> 這樣設的話寬跟高確實都有滿版如果是要讓色塊占滿整個網頁的話就跟.container的寬高有關係了。本篇文章回覆於2015-08-25 10:25 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓作者回應 Eric16899	感謝兩位大大回應請問迷路大大為啥會出現拉Bar 雖我亂試加上position:absolute; 就不會出現但我不知道原因 <style type="text/css"> body, div{ margin: 0; padding: 0; border: 0; } .div0 { margin-top: 10vh; height: 80vh; width: 90vw; margin-left: 5vw; background-color: #f00; position:absolute; } 本篇文章回覆於2015-08-25 11:46 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
4樓作者回應 Eric16899	感謝肉肉大大我一直弄不出來的就是高度 margin-top:5%; 如果調整IE 高度色塊無法自動調整 GOOGLE 很久找到範例使用top5%;空白就會自動調整... 問否margin-top:5% 某些情況會失效?? TKS 本篇文章回覆於2015-08-25 11:53 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
5樓回應迷路	會出現scrollbar??你的瀏覽器是? 我用chrome、firefox和ie11測試都沒有這樣的情況本篇文章回覆於2015-08-25 12:10 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
6樓回應肉肉	回樓主~~ 正常來說是不會有失效的問題，因為在margin-top:5%和其他相關的程式碼都是用"%"所以會有自動調整的感覺本篇文章回覆於2015-08-25 13:57 == 簽名檔 == --未登入的會員無法查看對方簽名檔--