Chrome和safari 浏览器 css flex height:100％失败

分类：HTML5+

css Safari chrome

Chrome是正常的，Safari失败。怎么样才能兼容？ height:100％; 我需要保留在Chrome 和 Safari。我的Safari版本10.1.2（12603.3.8）

<!DOCTYPE html>  
<head>  
    <meta charset="utf-8"/>  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">  
<style type="text/css">  
* {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
  outline: none;  
}  

*::-webkit-scrollbar {  
  width: 0;  
}  

html,  
body {  
  height: 100%;  
  width: 100%;  
  display: -webkit-flex;  
  display: -ms-flexbox;  
  display: flex;  
  -webkit-flex-direction: column;  
  flex-direction: column;  
}  

body {  
  border: 5px solid red;  
}  

.d {  
  height: 100%;  
  border: 5px solid green;  
}  
</style>  
</head>  
<body>  
    <div class="d"></div>  
    <div class="d"></div>  
</body>  
</html>

2017-08-17 23:29 负责人:无分享

1 个回复

LLgg

<!DOCTYPE html>  
<head>  
    <meta charset="utf-8"/>  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">  
<style type="text/css">  
* {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
  outline: none;  
}  

*::-webkit-scrollbar {  
  width: 0;  
}  

html,  
body {  
  height: 100%;  
  width: 100%;  
  display: -webkit-flex;  
  display: -ms-flexbox;  
  display: flex;  
  -webkit-flex-direction: column;  
  flex-direction: column;  
}  

body {  
  border: 5px solid red;  
}  

.d {  
  height: 50%;  
  border: 5px solid green;  
}  
</style>  
</head>  
<body>  
    <div class="d"></div>  
    <div class="d"></div>  
</body>  
</html>

456vv (作者)

你改为height:50%，chrome、ie、ff 怎么办？

2017-08-20 09:54

该问题目前已经被锁定, 无法添加新回复

Chrome和safari 浏览器 css flex height:100％失败

1 个回复

公告

相关问题

Chrome和safari 浏览器 css flex height:100％ 失败

与内容相关的链接

1 个回复

公告

相关问题

Chrome和safari 浏览器 css flex height:100％失败